使用 Create React App 管理临时构建的 .env 变量

使用 Create React App 开发 Web 应用程序时，开发人员默认NODE_ENV=development进入本地环境和NODE_ENV=production生产构建环境。并且，NODE_ENV禁止修改。根据 Create React App 的说明，这是有意为之，旨在保护production环境免受错误/意外部署的影响。

package.json创建 Web 应用程序后，您将能够看到如下所示的脚本。

// package.json
scripts: {
  "start": "react-scripts start", // `NODE_ENV` is equal to `development`.
  "build": "react-scripts build", // `NODE_ENV` is equal to `production`.
  ...
}

如果您在项目的根目录中创建或已经有和.env.development，.env.production这些文件将用于运行每个脚本。npm start将选择.env.development，并将npm build使用中的环境变量.env.production。

-
如果您想设置怎么办.env.staging？

本文将向您展示如何管理临时构建的环境变量。

让我们深入探讨一下！哦，如果你没有任何CRA经验，请开始

-

故事

假设您的项目将有三个独立的临时环境：development、staging和production。每个环境使用不同的 API 端点。此外，项目可能还需要REACT_APP_CUSTOM_NODE_ENV。这是因为无论如何，NODE_ENV始终都会production用于构建。

-

目标

• 创建.env.development、、.env.staging和.env.production。
• 为每个构建配置环境变量。
• 修改脚本package.json

-

入门

步骤1.

谢天谢地，dotenv开箱即用。让我们.env在根文件夹下创建文件来管理环境变量。这些文件是.env、.env.development、.env.staging和.env.production。

• .env- 保留所有常见/共享的环境变量
• .env.development- 变量用于本地开发
• .env.staging- 变量用于暂存构建
• .env.production- 变量用于生产构建

例如;

#.env
REACT_APP_DOC_TITLE = "Document title"

//.env.developement
REACT_APP_API_ENDPOINT = "https://development-api.endpoint.com/"

#.env.staging

# NODE_ENV will always be set to "production" for a build
# more details at https://create-react-app.dev/docs/deployment/#customizing-environment-variables-for-arbitrary-build-environments
REACT_APP_CUSTOM_NODE_ENV = "staging"
REACT_APP_API_ENDPOINT = "https://staging-api.endpoint.com/"

#.env.production
REACT_APP_API_ENDPOINT = "https://api.endpoint.com/"

REACT_APP_注意：创建自定义环境变量时需要前缀。

.env.development和.env.production

作为默认行为，这些文件无需任何配置即可提供。您甚至无需更新脚本package.json

.env.staging

这是本文的重点。为了将.env.staging文件作为暂存构建的目标，我们需要一个库来实现这一点。

1- 让我们安装env-cmd。这个库将帮助我们使用/执行选定的环境文件。查看更多详情

// execute command below at the root of project
$ npm install env-cmd --save
or
$ yarn add env-cmd

2-添加如下所示的脚本package.json。

// package.json
scripts: {
  "start": "react-scripts start", // `NODE_ENV` is equal to `development`.
  "build": "react-scripts build", // `NODE_ENV` is equal to `production`.
  "build:staging": "env-cmd -f .env.staging react-scripts build", // `NODE_ENV` is equal to `production`.
  ...
}

3-最后，测试您的build:staging脚本。

-

结论

此技术的目的是针对许多临时环境使用不同的自定义环境变量，而不弹出默认的 CRA 配置。

-

资源

• 自定义任意构建环境的环境变量

• 添加自定义环境变量

• dotenv

特别感谢

• @foxbit19 - 发现env-cmd版本 8.x 需要额外的参数来链接到自定义环境文件。
• @j6000 - 指出NODE_ENV无论如何构建都会始终设置为“生产”。