通过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)
- 如果将字符串作为环境常量传递,则应使用
JSON.stringify
。 - 您不需要多次定义
new webpack.DefinePlugin
。你可以在传递给new webpack.DefinePlugin
的一个对象中做到 - 它看起来更干净。
- If you pass string as a environment constant you should use
JSON.stringify
. - You don't need to define
new webpack.DefinePlugin
multiple times. You can do it in one object passed tonew webpack.DefinePlugin
- it looks cleaner.
这篇关于通过webpack更改不同环境的硬编码URL常量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!