react env
3.1.0
在運行時而不是構建時間從.env文件中填充您的環境。
.env文件。 該軟件包從多個.env文件中生成__ENV.js文件，其中包含具有REACT_APP_ prefix的白色上清單環境變量。
< script src =" /public/__ENV.js " />在瀏覽器中，您的變量將在window.__ENV.REACT_APP_FOO和Server process.env.REACT_APP_FOO上可用。我們包含了一個輔助功能，以使檢索值更容易：
# .env
REACT_APP_NEXT= " Next.js "
REACT_APP_CRA= " Create React App "
REACT_APP_NOT_SECRET_CODE= " 1234 "變成...
import env from "@beam-australia/react-env" ;
export default ( props ) => (
< div >
< small >
Works in the browser: < b > { env ( "CRA" ) } </ b > .
</ small >
< small >
Also works for server side rendering: < b > { env ( "NEXT" ) } </ b > .
</ small >
< form >
< input type = "hidden" defaultValue = { env ( "NOT_SECRET_CODE" ) } />
</ form >
< small >
Entire safe environment:
< pre >
< code > { { JSON . stringify ( env ( ) ) } } </ code >
</ pre >
</ small >
</ div >
) ;我們已經實施了一些具有以下優先順序的理智默認值：
{path-to-file} // from the --path, -p argument.env.{key} // from the --env, -e argument.env.local.env您的配置可在服務器上的瀏覽器和process.env中使用。我們建議您將.env.local添加到.gitignore 。
諸如下一個框架允許一些不錯的默認值，例如.env.local, .env.production, .env 。這有一個限制，您可能希望在不同的環境中運行應用程序，例如“分期，集成，QA”，但仍在使用NODE_ENV=production構建“生產”應用程序。使用React-env這是可能的：
# .env.staging
REACT_APP_API_HOST= " api.staging.com "
# .env.production
REACT_APP_API_HOST= " api.production.com "
# .env.qa
REACT_APP_API_HOST= " api.qa.com "
# .env.integration
REACT_APP_API_HOST= " api.integration.com "
# .env.local
REACT_APP_API_HOST= " api.example.dev "
# .env
REACT_APP_API_HOST= " localhost "為了進行分期，您只需設置APP_ENV=staging ：
{
...
"scripts": {
"start": "react-env --env APP_ENV -- next start" // where .env.${APP_ENV}
}
...
}
因此， REACT_APP_API_HOST=api.staging.com在您的登台環境中。
請記住，您必須將環境變量的名稱傳遞給
--env，而不是其價值。
- ✔有效用法（macOS）：
APP_ENV=staging react-env --env APP_ENV -- next start- 常見錯誤：
react-env --env staging -- next start
您還可以指定特定env文件的路徑：
{
...
"scripts": {
"start": "react-env --path config/.env.defaults -- next start"
}
...
}
您可以使用這兩個參數的任何組合以及默認的.env, .env.local來構建運行時配置。
您還可以指定白色名單環境變量的前綴：
{
...
"scripts": {
"start": "react-env --prefix NEXT_APP -- next start"
}
...
}
# .env
NEXT_APP_NEXT= " Next.js "
NEXT_APP_CRA= " Create React App "
NEXT_APP_NOT_SECRET_CODE= " 1234 " 如果您在測試過程中使用env()則需要在jest命令之前添加REACT_ENV_PREFIX env變量：
{
...
"scripts": {
"test": "REACT_ENV_PREFIX=NEXT_APP jest --maxWorkers=3"
}
...
}
可以將此軟件包用作DockerFile內部的ENTRYPOINT腳本。當容器靴子時，這將生成__ENV.js配置文件，並允許您的package.json腳本保持不變。當然， node二進制必須存在於您的容器中。
FROM node:alpine
ENTRYPOINT yarn react-env --env APP_ENV
CMD yarn start$ react-env < args > -- < command ><command>您可以將命令（例如nodejs輸入文件）傳遞給react-env cli工具。例如， react-scripts ， next dev ， next start
--env ， -e （默認：null）指定現有環境變量的名稱，其值是您想要的環境的名稱，以使React-Env解析特定環境Envile。例如，您可以首先設置APP_ENV=staging ，然後應用--env APP_ENV標誌。 React-Env將加載.env.staging, .env.local, .env後者優先。
--path ， -p （默認：null）指定一個特定的Env文件，以加載EG react-env --path .env.testing將加載.env.testing, .env.local, .env後者優先。 --env APP_ENV --path testing的組合，其中APP_ENV=staging loads .env.testing, .env.staging, .env.local, .env作為優先順序。
--dest ， -d （默認：./ public）更改生成__ENV.js文件的默認目的地。
--prefix （默認：react_app）更改白色上市env變量的默認前綴。對於示例react-env --prefix CUSTOM_PREFIX將will aster is aster astion變量，例如： CUSTOM_PREFIX_PUBLIC_KEY=my-public-key
--debug （默認值：false）啟用對React-Env的調試。在運行react-env --debug時，這將將已加載的瀏覽器環境變量記錄到您的控制台中
作為一個重大的打破變化，我們刪除了通過--env參數指定特定文件的能力。現在，此參數指定了根據運行環境來解析的環境文件。例如--env APP_ENV或-e APP_ENV ，其中APP_ENV=staging在.env.staging中讀取。平台具有在NODE_ENV=production “生產”模式下仍在“生產”模式下構建的staging, qa, integration環境非常普遍。這允許該用途酶和其他許多人。
- 您仍然可以通過--path, -p參數指定文件。
默認情況下，我們還放棄了添加NODE_ENV因為這是安全風險。
文件現在命名為__ENV.js
depandand命令現在以react-env <args> -- <command>
