Question

我有一个ApiCaller.js模块，用于生成对api服务器的调用以获取数据。它有const字段 API_URL ，它指向服务器网址。 dev 和 prod 环境的 API_URL const会发生变化。

因此，当我需要部署到 dev 环境时，我需要手动更改该网址（ API_URL ）以指向 dev-api-server 反之亦然。

我想在代码之外使用这些配置参数，在构建过程中我想动态更改它们，以便我可以使用不同的设置进行构建。

我正在使用 webpack 来捆绑我的javascript，html，css文件。

Answer 1

您可以将API_URL存储在webpack配置中：

// this config can be in webpack.config.js or other file with constants
var API_URL = {
    production: JSON.stringify('prod-url'),
    development: JSON.stringify('dev-url')
}

// check environment mode
var environment = process.env.NODE_ENV === 'production' ? 'production' : 'development';

// webpack config
module.exports = {
    // ...
    plugins: [
        new webpack.DefinePlugin({
            'API_URL': API_URL[environment]
        })
    ],
    // ...
}

现在在您的ApiCaller中，您可以使用API_URL定义的变量，它将根据process.env.NODE_ENV而有所不同：

ajax(API_URL).then(/*...*/);

（编辑）如果我有不同的环境常量的生产/开发配置？

想象一下，您有API_URL喜欢上述答案，API_URL_2和API_URL_3应该支持不同的环境设置production/development/test

var API_URL = {
    production: JSON.stringify('prod-url'),
    development: JSON.stringify('dev-url')
};

var API_URL_2 = {
    production: JSON.stringify('prod-url-2'),
    development: JSON.stringify('dev-url-2'),
    test: JSON.stringify('test-url-2')
};

var API_URL_3 = {
    production: JSON.stringify('prod-url-3'),
    development: JSON.stringify('dev-url-3'),
    test: JSON.stringify('test-url-3')
};

// get available environment setting
var environment = function () {
     switch(process.env.NODE_ENV) {
         case 'production':
             return 'production';
         case 'development':
             return 'development';
         case 'test':
             return 'test';
         default:                // in case ...
             return 'production';
     };
};

// default map for supported all production/development/test settings
var mapEnvToSettings = function (settingsConsts) {
     return settingsConsts[environment()];
};

// special map for not supported all production/development/test settings
var mapAPI_URLtoSettings = function () {
     switch(environment()) {
         case 'production':
             return API_URL.production;
         case 'development':
             return API_URL.development;
         case 'test':                    // don't have special test case
             return API_URL.development;
     };
};

// webpack config
module.exports = {
    // ...
    plugins: [
        new webpack.DefinePlugin({
            'API_URL': mapAPI_URLtoSettings(),
            'API_URL_2': mapEnvToSettings(API_URL_2),
            'API_URL_3': mapEnvToSettings(API_URL_3)
        })
    ],
    // ...
}

（编辑2）

如果您将字符串作为环境常量传递，则应使用JSON.stringify。
您不需要多次定义new webpack.DefinePlugin。您可以在传递给new webpack.DefinePlugin的一个对象中执行此操作 - 它看起来更清晰。

Answer 2

您可以设置define plugin以定义PRODUCTION变量，如果您为构建使用不同的配置文件，则可以定义true：

new webpack.DefinePlugin({
    PRODUCTION: process.env.NODE_ENV === 'production'
})

然后在您的代码中，您将编写如下内容：

var API_URL = PRODUCTION ? 'my-production-url' : 'my-development-url';

在编译期间，webpack会将PRODUCTION替换为其值（true或false），这应该允许UglifyJS缩小我们的表达式：

var API_URL = <true/false> ? 'my-production-url' : 'my-development-url';

最糟糕的情况是uglify无法缩小条件表达式，使其保持原样。

通过webpack

2 个答案:

（编辑）如果我有不同的环境常量的生产/开发配置？

（编辑2）