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

Question

所以，我们有一个反应项目。我们有三个分支：development，qa和staging。这是3 env中API URL的代码：

开发：

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

qa:

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变量上。

但我对如何实施它有一些疑问。我有些问题要问。

选项1:有三个.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的脚本，在这里我有两个环境测试和生产，

"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"