web-dev-qa-db-ja.com

Webpackを使用して異なる環境のハードコードされたURL定数を変更する

ApiCaller.js AP​​Iサーバーへの呼び出しを生成してデータを取得するモジュール。 constフィールドAPI_URLがあり、サーバーのURLを指します。これはAPI_URL constがdevおよびprod環境で変更されます。

dev環境にデプロイする必要がある場合、そのURL（API_URL）を手動でdev-api-serverを指すように変更する必要があります-その逆。

これらの構成パラメーターはコードの外部に置きたいので、ビルドプロセス中に動的に変更して、異なる設定でビルドできるようにします。

webpackを使用して、javascript、html、cssファイルをバンドルしています。

javascriptwebpackwebpack-dev-server
28
WitVault

API_URLをwebpack configに保存できます：

// 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）

  1. 文字列を環境定数として渡す場合は、JSON.stringifyを使用する必要があります。
  2. new webpack.DefinePluginを複数回定義する必要はありません。 new webpack.DefinePluginに渡される1つのオブジェクトでそれを行うことができます-きれいに見えます。
39
Everettss

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が条件式をそのままにしてそのままにすることができないことです。

1
AssassinsMod