javascript - htmlwebpackplugin - webpack externals

Cambie las constantes de url codificadas para diferentes entornos a través de webpack

Question

Tengo un módulo ApiCaller.js que genera llamadas a nuestro servidor api para obtener datos. Tiene el campo const API_URL que apunta a la url del servidor. Esta API_URL constará cambios para los entornos dev y prod .

Entonces, cuando necesito implementar en el entorno dev , necesito cambiar esa url ( API_URL ) manualmente para apuntar a dev-api-server y viceversa.

Quiero que estos parámetros de configuración estén fuera del código y, durante el proceso de compilación, quiero cambiarlos dinámicamente para poder construir con diferentes configuraciones.

Estoy usando un paquete web para empaquetar mis archivos javascript, html, css.

Answer 1

Puede configurar el complemento de definición para definir una variable de PRODUCTION siguiente manera (o, alternativamente, a true si utiliza diferentes archivos de configuración para las compilaciones):

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

Luego en tu código escribirás algo como:

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

Durante la compilación, el paquete web reemplazará a PRODUCTION con su valor (por lo tanto, true o false ), y esto debería permitir que UglifyJS minimice nuestra expresión:

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

El peor de los casos es que uglify no pueda minimizar la expresión condicional dejándola como está.

Answer 2

Puedes almacenar tu API_URL en la configuración del paquete web:

// 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]
})
],
// ...
}

Ahora en tu ApiCaller puedes usar API_URL como variable definida, que será diferente dependiendo de process.env.NODE_ENV :

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

(editar) ¿Si tengo más que configuración de producción / desarrollo para diferentes constantes de entorno?

Imagina que tienes API_URL como en la respuesta anterior, API_URL_2 y API_URL_3 que deberían admitir diferentes configuraciones de entorno de 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)
})
],
// ...
}

(editar 2)

1. Si pasa una cadena como una constante de entorno, debe usar JSON.stringify .
2. No es necesario que defina el new webpack.DefinePlugin . new webpack.DefinePlugin varias veces. Puede hacerlo en un objeto pasado a un new webpack.DefinePlugin - se ve más limpio.