create-react-app 添加自定义环境变量
添加自定义环境变量
注意：此功能适用于 react-scripts@0.2.3 及更高版本。
如果你的环境中声明的变量，那么项目可以直接使用这些变量。
默认情况下，你可以定义用 REACT_APP_ 开头的任何环境变量 ( 还有一个特殊的NODE_ENV）。
- 名为
REACT_APP_NOT_SECRET_CODE的环境变量将在你的 JS 中公开为process.env.REACT_APP_NOT_SECRET_CODE。 - 名为
NODE_ENV的特殊内置环境变量，你可以从process.env.NODE_ENV中读取它。
警告：请勿在您的 React 应用程序中存储任何敏感信息（例如私有 API 密钥等）！ 环境变量已嵌入到版本内部中，任何人都可以通过检查应用程序的文件来查看它们。
环境变量在构建期间嵌入
由于 Create React App 使用的时候，是最终生成静态的 HTML/CSS/JS 文件，因此无法在 runtime（运行时） 读取它们。
要在运行时读取它们，你需要将 HTML 加载到服务器上的内存中，并在运行时替换占位符，就像 此处所述，另外，您可以随时更改服务器上的应用程序。
注意：您必须创建以
REACT_APP_开头的自定义环境变量。 除NODE_ENV以外的任何其他变量都将被忽略，以避免在机器上意外暴露具有相同名称的私钥。 如果正在运行开发服务器，更改任何环境变量将需要您重新启动。
将在 process.env 上为你定义这些环境变量。
例如，名为 REACT_APP_NOT_SECRET_CODE 的环境变量将在你的 JS 中公开为 process.env.REACT_APP_NOT_SECRET_CODE 。
NODE_ENV
还有一个名为 NODE_ENV 的特殊内置环境变量。你可以从 process.env.NODE_ENV 中读取它。
- 当你运行
npm start时，它总是等于'development'。 - 当你运行
npm test它总是等于'test'， - 当你运行
npm run build来生成一个生产bundle（包） 时，它总是等于'production'。 - 你无法手动覆盖
NODE_ENV。
这可以防止开发人员意外地部署到生产环境中。
这些环境变量可用于根据项目的部署位置或消耗版本控制之外的敏感数据有条件地显示信息。
首先，你需要定义环境变量。例如，假设你想要使用 <form> 中的环境中定义的秘密：
render() {
return (
<div>
<small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
<form>
<input type="hidden" defaultValue={process.env.REACT_APP_NOT_SECRET_CODE} />
</form>
</div>
);
}
在构建期间， process.env.REACT_APP_NOT_SECRET_CODE 将替换为 REACT_APP_NOT_SECRET_CODE 环境变量的当前值。
请记住，项目将自动为你设置 NODE_ENV 变量。
当你在浏览器中加载应用程序并检查 <input> 时，你将看到其值设置为 abcdef ，粗体文本将显示使用 npm start 时提供的环境：
<div>
<small>You are running this application in <b>development</b> mode.</small>
<form>
<input type="hidden" value="abcdef" />
</form>
</div>
上面的表单正在从环境中查找名为 REACT_APP_NOT_SECRET_CODE 的变量。为了消耗这个值，我们需要在环境中定义它。
这可以使用两种方式完成：在 shell 中或在 .env 文件中。
接下来的几节将介绍这两种方法。
有权访问 NODE_ENV 对于有条件地执行操作也很有用：
if (process.env.NODE_ENV !== 'production') {
analytics.disable();
}
当你使用 npm run build 编译应用程序时，压缩步骤将消除此条件，并且生成的 bundle（包）将更小。
在 HTML 中引用环境变量
注意：此功能适用于 react-scripts@0.9.0 及更高版本。
您也可以访问环境变量开始 REACT_APP_ 的 public/index.html。 例如：
<title>%REACT_APP_WEBSITE_NAME%</title>
请注意，上述部分的警告适用：
-
除了一些内置变量（
NODE_ENV和PUBLIC_URL）之外，变量名必须以REACT_APP_开头才能工作。 -
环境变量在构建时注入。 如果需要在运行时注入它们，请改为使用此方法 。
在 Shell 中添加临时环境变量
定义环境变量可能因操作系统而异。 同样重要的是要知道这种方式对于 shell 会话是暂时的。
Windows (cmd.exe)
set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start
（注意：变量赋值需要用引号包裹，以避免尾随空格。）
Windows (Powershell)
($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start)
Linux, macOS (Bash)
REACT_APP_NOT_SECRET_CODE=abcdef npm start
定义永久环境变量
在 .env 中添加开发环境变量
注意：此功能适用于 react-scripts@0.5.0 及更高版本。
要定义永久环境变量，请在项目的根目录中创建名为 .env 的文件：
REACT_APP_NOT_SECRET_CODE=abcdef
注意：你必须以 REACT_APP_ 开头创建自定义环境变量，除了 NODE_ENV 之外的任何其他变量都将被忽略，以避免意外地在可能具有相同名称的计算机上公开私钥。
注意：更改
.env文件后，您需要重新启动开发服务器。
.env 文件 应该 检入源代码控制（不包括.env*.local）。
还可以使用哪些其他 .env 文件？
注意：此功能 适用于 react-scripts@1.0.0 及更高版本。
.env：默认。.env.local：本地覆盖。除 test 之外的所有环境都加载此文件。.env.development,.env.test,.env.production：设置特定环境。.env.development.local,.env.test.local,.env.production.local：设置特定环境的本地覆盖。
左侧的文件比右侧的文件具有更高的优先级：
npm start:.env.development.local,.env.development,.env.local,.envnpm run build:.env.production.local,.env.production,.env.local,.envnpm test:.env.test.local,.env.test,.env（注意没有.env.local)
如果机器没有明确设置它们，这些变量将作为默认值。
有关更多详细信息，请参阅 dotenv 文档 : https://github.com/motdotla/dotenv 。
注意：如果要为开发定义环境变量，则 CI 和 / 或 托管平台 很可能也需要定义这些变量。如何执行此操作请参阅他们的文档。例如，请参阅 Travis CI 或 Heroku 的文档。
在 .env 中展开环境变量
注意：此功能适用于 react-scripts@1.1.0 及更高版本。
展开计算机上已有的变量，以便在 .env 文件中使用（使用 dotenv-expand ）。
例如，要获取环境变量 npm_package_version ：
REACT_APP_VERSION=$npm_package_version
# also works:
# REACT_APP_VERSION=${npm_package_version}
或者展开当前 .env 文件的本地变量：
DOMAIN=www.example.com
REACT_APP_FOO=$DOMAIN/foo
REACT_APP_BAR=$DOMAIN/bar
