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>
