Comment gérer les variables globales dans Webpack ?

Approches pour définir des variables globales dans Webpack

1. Initialisation du module

Webpack n'évalue les modules qu'une seule fois, vous permettant de créer un module comme globals.js contenant un objet de variables globales. Vous pouvez importer ce module dans d'autres modules et modifier ou accéder à ses propriétés, en conservant la portée globale.

2. ProvidePlugin de Webpack

Ce plugin vous permet de rendre un module disponible en tant que variable dans n'importe quel module où il est utilisé. Il simplifie le code en éliminant les instructions d'importation répétitives. Pour utiliser le ProvidePlugin pour votre module (par exemple, utils.js), alias le module dans la configuration de votre webpack et ajoutez-le au plugin comme :

new webpack.ProvidePlugin({
  'utils': 'utils'
})

3. DefinePlugin de Webpack

Utilisez ce plugin pour définir des constantes globales avec des valeurs de chaîne :

new webpack.DefinePlugin({
  VERSION: JSON.stringify("5fa3b9"),
})

console.log("Running App version " + VERSION);

4. Objet Global (window/global)

Cette approche permet la déclaration de variables globales directement dans le navigateur (window.foo = 'bar') ou dans un environnement Node.js (global.foo = 'bar' ). Il est couramment utilisé pour les polyfills.

5. Package : dotenv

Pour les projets côté serveur, dotenv permet de définir des variables de configuration dans un fichier local (.env) et de les ajouter automatiquement à l'objet process.env de Node.

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!