Create React App 添加自定义环境变量-JavaScript中文网-JavaScript教程资源分享门户

注意：此功能适用于 react-scripts@0.2.3 及更高版本。

你的项目可以使用在你的环境中声明的变量，就好像它们是在 JS 文件中本地声明的变量一样。默认情况下，你将为你定义 NODE_ENV ，以及以 REACT_APP_ 开头的任何其他环境变量。

环境变量在构建期间嵌入。由于 Create React App 生成静态的 HTML / CSS / JS 包，因此无法在 runtime(运行时) 读取它们。要在运行时读取它们，你需要将HTML 加载到服务器上的内存中，并在运行时替换占位符，就像此处所述。或者，你可以随时在服务器上重建应用程序。

你必须以 REACT_APP_ 开头创建自定义环境变量。除了 NODE_ENV 之外的任何其他变量都将被忽略，以避免意外地在可能具有相同名称的计算机上公开私钥。更改任何环境变量都需要重新启动正在运行的开发服务器。

将在 process.env 上为你定义这些环境变量。例如，名为 REACT_APP_SECRET_CODE 的环境变量将在你的JS中公开为 process.env.REACT_APP_SECRET_CODE 。

还有一个名为 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_SECRET_CODE}"/>
      </form>
    </div>
  );
}

在构建期间， process.env.REACT_APP_SECRET_CODE 将替换为 REACT_APP_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_SECRET_CODE 的变量。为了消耗这个值，我们需要在环境中定义它。这可以使用两种方式完成：在 shell 中或在 .env 文件中。接下来的几节将介绍这两种方法。

有权访问 NODE_ENV 对于有条件地执行操作也很有用：

if (process.env.NODE_ENV !== 'production') {
  analytics.disable();
}

当你使用 npm run build 编译应用程序时，压缩步骤将消除此条件，并且生成的 bundle(包) 将更小。

在 HTML 中引用环境变量

注意：此功能适用于 react-scripts@0.9.0 及更高版本。

你还可以在 public/index.html 中以 REACT_APP_ 开头访问环境变量。例如：

<title>%REACT_APP_WEBSITE_NAME%</title>

请注意，上述部分的警告适用：

除了一些内置变量（ NODE_ENV 和 PUBLIC_URL）之外，变量名必须以 REACT_APP_ 开头才能工作。
环境变量在构建时注入。如果需要在运行时注入它们，请改为使用此方法。

在 Shell 中添加临时环境变量

定义环境变量可能因操作系统而异。同样重要的是要知道这种方式对于 shell 会话是暂时的。

Windows (cmd.exe)

set "REACT_APP_SECRET_CODE=abcdef" && npm start

（注意：变量赋值需要用引号包裹，以避免尾随空格。）

Windows (Powershell)

($env:REACT_APP_SECRET_CODE = "abcdef") -and (npm start)

Linux, macOS (Bash)

REACT_APP_SECRET_CODE=abcdef npm start

在 `.env` 中添加开发环境变量

注意：此功能适用于 react-scripts@0.5.0 及更高版本。

要定义永久环境变量，请在项目的根目录中创建名为 .env 的文件：

REACT_APP_SECRET_CODE=abcdef

注意：你必须以 REACT_APP_ 开头创建自定义环境变量。除了 NODE_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, .env
npm run build: .env.production.local, .env.production, .env.local, .env
npm test: .env.test.local, .env.test, .env (注意没有 .env.local )

如果机器没有明确设置它们，这些变量将作为默认值。
有关更多详细信息，请参阅 dotenv 文档。

注意：如果要为开发定义环境变量，则 CI 和/或托管平台很可能也需要定义这些变量。如何执行此操作请参阅他们的文档。例如，请参阅 Travis CI 或 Heroku 的文档。

在 `.env` 中展开环境变量

注意：此功能适用于 react-scripts@1.1.0 及更高版本。

展开计算机上已有的变量，以便在 .env 文件中使用（使用 dotenv-expand ）。

例如，要获取环境变量 npm_package_version ：

REACT_APP_VERSION=$npm_package_version
＃也有效：
# REACT_APP_VERSION=${npm_package_version}

或者展开当前 .env 文件的本地变量：

DOMAIN=www.example.com
REACT_APP_FOO=$DOMAIN/foo
REACT_APP_BAR=$DOMAIN/bar

Create React App 添加自定义环境变量