如何为不同环境参数化 React Webpack 应用程序中的变量？答案

【问题标题】：How to parameterize variables in a React Webpack app for different environments?如何为不同环境参数化 React Webpack 应用程序中的变量？
【发布时间】：2017-08-30 06:50:26
【问题描述】：

我正在开发一个由 create-react-app 创建的 React Web 应用程序，我正准备部署它。

问题是，对于开发，应用程序使用在我的开发环境 (localhost:{api-port}) 上运行的 api 实例，但对于已部署的应用程序，这应该指向服务器 api 实例 (api.myapp.com) .

目前主机只是我的网络组件中的一个变量：

const hostname = 'localhost:9876'

我计划使用 webpack 生成将由生产前端提供的静态文件，我想继续使用 create-react-app 设置的 npm start 进行开发。

什么是设置我的项目的正确方法，以便可以根据我是运行开发服务器还是构建生产环境自动将主机设置为正确的值？

【问题讨论】：

标签： reactjs webpack create-react-app

【解决方案1】：

一个常见的解决方案是像这样检查process.env.NODE_ENV：

const hostname = process.env.NODE_ENV === "development" ? "localhost:9876" : "localhost:6789";

您可能需要使用 DefinePlugin 强制环境变量出现在您的 Webpack 配置文件中，如下所示：

plugins: [
  new webpack.DefinePlugin({
    "process.env": {
      NODE_ENV:JSON.stringify(process.env.NODE_ENV || "development")
    }
  })
]

另一种解决方案可能是使用config 包并提供您的主机名字符串作为配置参数。 config 将从基于当前 NODE_ENV 的文件中继承配置。它将首先使用 default.json 文件中的配置，然后根据您的环境使用 development.json 或 production.json 覆盖它。

请注意，您需要使用 CopyWebpackPlugin 将配置文件复制到您的输出目录中才能正常工作。

【讨论】：

【解决方案2】：

肯定有很多方法可以实现这一目标。其中一种解决方案是使用 webpacks 的DefinePlugin。在 webpack 配置的插件部分中，您将添加如下内容：

new webpack.DefinePlugin({
  API_HOST: process.env.NODE_ENV === 'production'
    ? JSON.stringify('localhost:8080')
    : JSON.stringify('api.com')
}),

这会创建一个全局变量 API_HOST 在您的代码库中随处可用，您可以使用它。你可以阅读更多关于DefinePlugin这里https://webpack.js.org/plugins/define-plugin/

【讨论】：

【解决方案3】：

当您向您的 api 服务器发出任何请求时，您可以使用相对路径，而不是为您的应用调用完整的 url。

为了您的开发，您可以在您的 package.json 文件中添加一个代理属性：

{
...
"proxy": {
  "/api/*": {
      "target" :"http://localhost:9876"
  }
 }
}

因此，每当您提出任何以/api 为前缀的请求时，都将被重定向到http://localhost:9876/api，这只是在开发中，但在生产中，如果您提出以/api 为前缀的请求，它将不会被重定向正常服务，因为代理仅在 create-react-app 附带的开发服务器中可用。

【讨论】：