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

Question

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

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

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

const hostname = 'localhost:9876'

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

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

Answer 1

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

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

这会创建一个全局变量 API_HOST，在您的代码库中随处可用，您可以使用它。您可以在此处 https://webpack.js.org/plugins/define-plugin/

阅读有关 DefinePlugin 的更多信息

Answer 2

一个常见的解决方案是像这样检查 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 将配置文件复制到输出目录才能正常工作。

Answer 3

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

为了您的开发，您可以将代理属性添加到您的 package.json 文件：

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

所以无论何时你发出任何前缀为 /api 的请求都将被重定向到 http://localhost:9876/api 这只是在开发中，但如果你发出前缀为 /api 的请求则在生产中它不会被重定向，它会正常服务，因为代理只在 create-react-app.

附带的开发服务器中可用

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

How to parameterize variables in a React Webpack app for different environments?

reactjs

webpack

create-react-app