React + Webpack：在哪里配置 REST 端点

Question

我有一个 React+Flux 应用程序并使用 Webpack。我正在使用的 REST API 由不同的服务器提供服务，我试图找出可以在哪里指定后端端点常量，具体取决于我是在开发环境还是生产环境中。

目前，对于开发人员，我已将 URL 硬编码为 localhost:port，但当我部署时，它仍会尝试访问本地主机上的端点。

看起来应该是很常见的东西，但是找不到任何资料。

Answer 1

您可以将环境变量添加到您的 webpack 脚本中。当您在 bash 或您的 package.json 中使用 webpack 脚本时，node 的一个常见做法是使用 ENV=production||dev。接下来您可以创建两个不同的配置文件，一个用于生产，一个用于开发。

plugins: [
    new webpack.DefinePlugin({
        ENV: process.ENV === 'dev' ? require('./dev-config-path')) : require('./prod-config-path')
    })
]

ENV 现在应该附加到 window 对象。确保不要添加 API 键或任何东西，因为它可以访问。您也可以硬编码 api URL.

plugins: [
    new webpack.DefinePlugin({
        API: process.ENV === 'dev' ? 'localhost:3000' : 'xxx.xxx.x.x'
    })
]

Answer 2

我发现在 webpack.config.js 上使用 webpack 的 externals 属性更容易。这就是你要做的：

在webpack.config.js

    ...
    externals: {
      config: JSON.stringify(production ? require('./config.prod.json') : require('./config.dev.json'))
    }
    ...

这样您就可以为不同的环境创建单独的文件，列出您需要的所有配置变量。此外，您可以使用 webpack.config.dev.js 和 webpack.config.prod.js 并在那里指定相同的 externals 键并跳过三元检查。

最后，您在代码中将它们作为 commonjs 模块进行访问 - var config = require('config')

React + Webpack: Where to configure REST Endpoints