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

Posted 2023-02-22

【中文标题】React + Webpack：在哪里配置 REST 端点

【英文标题】：React + Webpack: Where to configure REST Endpoints

【发布时间】：2016-04-02 15:40:03

【问题描述】：

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

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

似乎应该是很常见的东西，但找不到任何信息。

【问题讨论】：

How to store Configuration file and read it using React的可能重复

【参考方案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 现在应该附加到窗口对象。确保不要添加 API 密钥或任何东西，因为它可以访问。你也可以硬编码 api URL。

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

【讨论】：

为什么在“插件”中？这个其他答案说我们应该使用“外部”字段：***.com/a/30602665/2197181。这两种方法是否等效？

【参考方案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')

【讨论】：

你能打印你的堆栈跟踪吗？

@ceebreenk 您需要将externals 定义为module.exports 的直接子代。确保是这种情况。 ``` module.exports = ... externals: ```