如何为不同阶段的 React 应用程序构建？答案

【问题标题】：How to make build for react app for different stages?如何为不同阶段的 React 应用程序构建？
【发布时间】：2018-03-30 17:35:55
【问题描述】：

我有一个单页应用程序，它是一个反应应用程序。我正在使用 webpack。我在为每个阶段（如测试、测试版和产品）配置服务器 API URL 时遇到问题。

有一些标准的方法吗？

【问题讨论】：

【解决方案1】：

根据NODE_ENV 执行此操作。

在你的应用程序中为它的基本路径声明一个 url 文件。

const baseURL = (__DEV__) ? url1 : url 2;

或者switch语句，没关系。

要能够访问这些变量，你必须使用来自 webpack 的DefinePlugin。

new webpack.DefinePlugin({
  envType: JSON.stringify(process.env.NODE_ENV)
})

或类似的东西......

【讨论】：

【解决方案2】：

创建一个.env 并在其中添加您的变量，确保它们以REACT_APP 为前缀，例如REACT_APP_SERVER_URL=https://example.com

您可以为 dev、prod、test 等创建多个 env 文件，例如 .env.local、.env.prod

从你的 npm 命令注入的 env 文件

npm start: .env.development.local, .env.development, .env.local, .env
npm run build: .env.production.local, .env.production, .env.local, .env

在代码中使用变量，例如

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

或

 <b>{process.env.NODE_ENV}</b>

【讨论】：