Comment transmettre des variables dépendantes de l'environnement dans Webpack pour les applications angulaires ?

Passer des variables dépendantes de l'environnement dans Webpack

Dans les applications angulaires converties de Gulp en Webpack, répliquer la fonctionnalité de Gulp-Preprocess à l'aide de webpack pour le remplacement dynamique de variables (telles que les noms de bases de données) basées sur NODE_ENV nécessite une approche différente.

Il existe plusieurs options pour y parvenir :

DefinePlugin

Utilisez webpack.DefinePlugin pour injecter des variables d'environnement sous forme de chaînes JSON directement dans le code.

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
})

Notez que cette technique remplace les chaînes correspondantes "telles quelles", nécessitant le format JSON spécifique. Des structures complexes, comme des objets, sont possibles, mais le principe reste le même.

EnvironmentPlugin

Exploitez le webpack.EnvironmentPlugin, qui utilise en interne DefinePlugin. Il mappe les valeurs de l'environnement au code, simplifiant ainsi la syntaxe.

new webpack.EnvironmentPlugin(['NODE_ENV'])

Alias

Consommer la configuration via un module avec alias :

// Consumer side
var config = require('config');

// Configuration itself
resolve: {
    alias: {
        config: path.join(__dirname, 'config', process.env.NODE_ENV)
    }
}

Basé sur NODE_ENV, cet exemple correspond à un module tel que ./config/development.js, qui exporte la configuration souhaitée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!