Javascript Webpack React：有条件地加载json配置文件

我有一个WebpackReact项目，我正在我的登台服务器上测试它。 现在是在生产服务器上发布它的时候了

我使用的是server.json文件，该文件包含服务器信息，如api密钥、api地址等

我想要的是使用不同的server.json进行生产和暂存。 当我使用production-server.json时，我的包中不会有staging-server.json的痕迹

src
- config
-- config.js
-- production-server.json
-- staging-server.json

---

可能类似于：纱线构建阶段、纱线构建生产

您应该使用环境变量和网页包。此外，您可以使用自动加载基于节点的json配置文件

package.json

项目配置结构

网页包配置

然后在react代码中，您将可以访问特定于环境的配置

componentDidMount() {
  // in prod: https://api.mysite.com/v1/user/some-user-id
  // in staging: http://localhost:8000/v1/user/some-user-id
  return axios(`${CONFIG.api}/user/${this.props.userId}`).then(whatever...)
}

如果您在windows上，请使用设置环境变量

使用节点配置并不是实现这一点的唯一方法，有几种方法，但我发现这很容易，除非您使用的是electron

编辑

由于node config使用nodejs，它通常与webpack一起用于前端项目。如果您无法将其与webpack集成，则根本不需要使用节点配置，我会这样做：

项目结构

配置文件

---

您应该使用环境变量和网页包。此外，您可以使用自动加载基于节点的json配置文件

package.json

项目配置结构

网页包配置

然后在react代码中，您将可以访问特定于环境的配置

componentDidMount() {
  // in prod: https://api.mysite.com/v1/user/some-user-id
  // in staging: http://localhost:8000/v1/user/some-user-id
  return axios(`${CONFIG.api}/user/${this.props.userId}`).then(whatever...)
}

如果您在windows上，请使用设置环境变量

使用节点配置并不是实现这一点的唯一方法，有几种方法，但我发现这很容易，除非您使用的是electron

编辑

由于node config使用nodejs，它通常与webpack一起用于前端项目。如果您无法将其与webpack集成，则根本不需要使用节点配置，我会这样做：

项目结构

配置文件

---

但是捆绑销售呢？Webpack将捆绑这两个配置文件？@rendom否，Webpack将只捆绑您提供的配置文件。节点配置只会给你一个配置对象。所以这个配置文件应该在src目录之外，否则就没关系了？我的问题是什么。如果我把server.json文件放在src文件夹中，webpack会把它捆绑起来吗？在您的示例中，您使用了不同的文件夹进行配置storing@rendom只需去掉server.json。最好按env名称组织配置文件。但是绑定呢？Webpack将捆绑这两个配置文件？@rendom否，Webpack将只捆绑您提供的配置文件。节点配置只会给你一个配置对象。所以这个配置文件应该在src目录之外，否则就没关系了？我的问题是什么。如果我把server.json文件放在src文件夹中，webpack会把它捆绑起来吗？在您的示例中，您使用了不同的文件夹进行配置storing@rendom只需去掉server.json。最好按env名称组织配置文件。

// node-config will load your staging.json or default.json file here
// depending on what NODE_ENV is
const config = require('config');

plugins: [
  // inject window.CONFIG into your app
  new webpack.DefinePlugin({
    CONFIG: JSON.stringify(config)
  })
]

componentDidMount() {
  // in prod: https://api.mysite.com/v1/user/some-user-id
  // in staging: http://localhost:8000/v1/user/some-user-id
  return axios(`${CONFIG.api}/user/${this.props.userId}`).then(whatever...)
}

config
  default.json
  development.json
  test.json
  index.js
src
  ...etc

// default.json, typically used for production
{
  "api": "https://api.mysite.com/v1"
}

// development.json
{
  "api": "http://localhost:8000/v1"
}

// index.js
// get process.env via babel-plugin-transform-inline-environment-variables
import production from './default.json';
import development from './development.json';
const { NODE_ENV: env } = process.env;

const config = {
  production,
  development
};

export default config[env];