javascript - 通过 webpack 更改不同环境的硬编码 url 常量

Question

我有一个 ApiCaller.js 模块，它生成对我们的 api 服务器的调用以获取数据。它有 const 字段 API_URL 指向服务器 URL。此 API_URL 常量会针对 dev 和 prod 环境进行更改。

因此，当我需要部署到 dev 环境时，我需要手动更改该 URL (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 应该支持不同的环境设置生产/开发/测试

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)

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