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

时间:2015-12-28 19:24:54

标签: rest reactjs webpack flux reactjs-flux

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

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

它似乎应该是非常常见的东西,但找不到任何信息。

2 个答案:

答案 0 :(得分:6)

您可以将环境变量添加到webpack脚本中。节点的一个常见做法是在bash或package.json中使用webpack脚本时使用ENV = 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'
    })
]

答案 1 :(得分:0)

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

webpack.config.js

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

这样,您可以为不同的环境提供单独的文件,列出您需要的所有配置变量。此外,您可以webpack.config.dev.jswebpack.config.prod.js并在那里指定相同的externals密钥,并跳过三元检查。

最后,您可以在代码中将其作为commonjs模块访问 - var config = require('config')