Question

我有一个WebPack React项目，该项目正在我的“ 登台”服务器上进行测试。现在该在“ 生产”服务器上发布它了。

我正在使用 server.json 文件，该文件包含服务器信息，例如api密钥，api地址等。

我想要的是使用不同的server.json进行“生产”和“登台”。而且当我使用production-server.json时，捆绑包中将没有没有任何痕迹 staging-server.json。

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

可能类似于：纱线成型阶段，纱线成型生产

Answer 1

您应该使用环境变量和webpack的DefinePlugin。此外，您可以使用node-config根据您的NODE_ENV自动加载json配置文件。

package.json

"scripts": {
  "build:dev": "NODE_ENV=development start-something",
  "build": "NODE_ENV=production start-something"
}

项目配置结构

config
  default.json
    { "api": "https://api.mysite.com/v1" }
  staging.json
    { "api": "http://localhost:8000/v1" }

Webpack配置

// 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...)
}

如果您在Windows上，请使用cross-env设置环境变量。

使用node-config并不是唯一的方法，有几种方法，但是我发现这很容易，除非您正在使用电子。

修改

由于node-config使用nodejs，因此通常在前端项目中与webpack一起使用。如果您无法将其与Webpack集成，则完全不需要使用node-config，我将执行以下操作：

项目结构

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];

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

1 个答案: