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

我有一个React+Flux应用程序，正在使用Webpack。我正在使用的REST API由不同的服务器提供服务，我正试图弄清楚在哪里可以指定后端端点常量，这取决于我是在dev环境中还是在prod环境中。

目前，对于dev，我已经将URL编码为localhost:port，但在部署时，它仍然尝试访问localhost上的端点。

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

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

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

现在应该将ENV附加到窗口对象。请确保不要添加API密钥或任何内容，因为它将是可访问的。您也可以对api URL进行硬编码。

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

我发现在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')

相关内容