管理多个环境的环境变量的最佳方法

Question

所以，我们有一个 React 项目。我们有 3 个分支机构：development、qa 和 staging。这是 3 个环境中 API URL 的代码：

开发：

const API_URL = process.env.NODE_ENV === 'development' ? 'https://our-website-development.com/api' : '/api';

质量保证：

const API_URL = process.env.NODE_ENV === 'development' ? 'https://our-website-qa.com/api' : '/api';

分期：

const API_URL = process.env.NODE_ENV === 'development' ? 'https://our-website-staging.com/api' : '/api';

当然，这有一个问题：每次我们在环境之间移动东西时都会产生这种冲突。 所以我想把它移到 ENV 变量中。

但是我对如何实现它有一些疑问。我有一些问题。

方案一：拥有三个.env文件（.env.development、.env.qa、.env.staging），每个文件都有正确的URL，将这个文件推送到三个分支，然后添加脚本启动项目喜欢npm start development 或npm start qa。

选项 2. 只有一个 .env 文件，不要将其推送到项目中，使其在每个环境中都是静态的。这意味着每次我在开发时切换分支时都必须手动更改端点 url。

还有更好的选择吗？

Answer 1

稍加改动的选项 1 就可以完成这项工作。保留 3 个环境文件，而不是在 3 个分支中使用它们，保留 3 个 npm 任务用于启动和构建。在构建时，保留单独的文件夹将很有用。如果你需要这个想法的例子，请告诉我。我正在使用 env-cmd 将我的 .env 文件与我的任务挂钩。

更新：

下面是我的 Package.json 脚本，我有 2 个环境测试和生产，

"scripts": {
"start": "set PORT=41100 && env-cmd -f .env.test react-scripts start",
"build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",
"build:test": "env-cmd -f .env.test npm run-script build && DEL /S /Q test && move build test",
"build:production": "env-cmd -f .env.production npm run-script build && DEL /S /Q production && move build production",
"test": "react-scripts test",
"format": "prettier --write src/**/*.ts{,x}",
"lint": "tsc --noEmit && eslint src/**/*.ts{,x}"

},

我正在使用 Windows 进行开发。如果你不是这个帖子可能有助于调整你的脚本，

Use custom build output folder when using create-react-app

配置苍蝇是 .env.test 和 .env.production 和内容看起来像，

REACT_APP_SOME_API = "https://myurl/api/resource"