通过webpack更改不同环境的硬编码URL常量 [英] Change hard coded url constants for different environments via webpack

问题描述

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

I have a ApiCaller.js module which generate calls to our api server to get data. It has const field API_URL which points to server url. This API_URL const changes for dev and prod environments.

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

So when I need to deploy to dev environment I need to change that url (API_URL) manually to point to dev-api-server and vice-versa.

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

I want these configuration parameters outside the code and during build process I want to change them dynamically so that I can build with different settings.

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

I am using webpack to bundle my javascript, html, css files.

推荐答案

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

You can store your API_URL in 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 ：

Now in your ApiCaller you can use API_URL as defined variable, which it will be different depend on process.env.NODE_ENV:

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

---

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

想象一下，你有 API_URL ，如上面的答案， API_URL_2 和 API_URL_3 应该支持不同的环境设置生产/开发/测试

---

(edit) If I have more than production/development config for different environment constants?

Imagine that you have API_URL like in above answer, API_URL_2 and API_URL_3 which should support different environment settings 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）

---

(edit 2)

1. 如果将字符串作为环境常量传递，则应使用 JSON.stringify 。


2. 您不需要多次定义 new webpack.DefinePlugin 。你可以在传递给 new webpack.DefinePlugin 的一个对象中做到 - 它看起来更干净。

1. If you pass string as a environment constant you should use JSON.stringify.
2. You don't need to define new webpack.DefinePlugin multiple times. You can do it in one object passed to new webpack.DefinePlugin - it looks cleaner.

这篇关于通过webpack更改不同环境的硬编码URL常量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！