如何在 React 应用程序中处理多个环境答案

【问题标题】：How to handle multiple environments in React app如何在 React 应用程序中处理多个环境
【发布时间】：2020-11-12 15:56:23
【问题描述】：

我正在做一个小项目，包括两个环境的反应前端和 Java 后端。

我在如何处理多个环境的想法上苦苦挣扎，我使用 axios 声明 API url：

export default axios.create({
  baseURL: `http://api.dev.project.local/api/v1`,
});

但这仅适用于一种环境，构建包后如何更改API url？我认为创建两个构建（一个用于开发，一个用于生产）不是一个好习惯，因为它可能会在工件管理器内部造成混乱（我们使用 Azure Artifacs Feed）。

你如何解决这个问题？

【问题讨论】：

尝试使用webpack
@JosephD。谢谢！我会检查的:)
@JosephD。但是使用 webpack 会产生相同的结果，对吧？多个包，每个包用于不同的环境？
@FilipNiko，对。每个环境都有不同的 webpack 配置：dev、prod 和 common。使用webpack-merge 生成不同的输出包。不熟悉 Azure，但捆绑散列可能很方便。
@JosephD。感谢您的输出，但是如何处理注册表中的版本（工件提要），如果一个可以具有与其他不同的 API 配置，那么我无法将每个 pacakge 部署到每个环境...

标签： javascript reactjs

【解决方案1】：

如果您使用 create-react-app，并且只需要使用 Adding Custom Environment Variables 内置功能的本地和生产环境。否则，一个有用的替代方法是 env-cmd。

安装 env-cmd，作为开发依赖：

npm i -D env-cmd

添加 .env 文件（在项目根目录，所有环境都相同）：

REACT_APP_API_ENDPOINT = https://default.example.com

添加 .env.qa 文件：

REACT_APP_API_ENDPOINT = https://qa.example.com

添加 .env.staging 文件：

REACT_APP_API_ENDPOINT = https://stage.example.com

添加 .env.production 文件：

REACT_APP_API_ENDPOINT = https://production.example.com

更新 package.json

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:qa": "env-cmd -f .env.qa npm run-script build",
    "build:staging": "env-cmd -f .env.staging npm run-script build",
  }
}

请注意，默认的 start 和 build create-react-app 命令使用 .env 和 .env.production 分别，不需要 env-cmd。

准备在我们的代码中使用

const baseUrl = process.env.REACT_APP_API_BASE_URL;

而且，我们也可以在开发环境中使用 env-cmd 作为启动命令。

【讨论】：

【解决方案2】：

我认为您应该使用环境变量并创建一个 .env 文件并将其与您的项目分开。

更多信息您可以react docs about environment variables

或者你可以使用npm scripts variables

希望对你有用。

【讨论】：

谢谢，这是我们现在正在尝试实施的一种方法，但是我不确定这将如何解决多个构建结果的问题？
具有不同的 .env 文件，或者在第二种解决方案中具有用于构建开发和生产的不同脚本
明白，但这是我想避免的事情，我想为所有环境构建一个版本，我不太相信构建幂等性......