Comment définir des variables globales dans votre configuration Webpack ?

Définition de variables globales avec Webpack

Dans la configuration de votre webpack, vous pouvez utiliser différentes méthodes pour définir des variables globales.

1. Modules

Créez un module et exportez un objet contenant vos variables globales. Importez ce module et accédez aux variables.

// config.js
export default {
  FOO: 'bar',
};

// somefile.js
import CONFIG from './config.js';
console.log(`FOO: ${CONFIG.FOO}`);

2. ProvidePlugin

Utilisez ProvidePlugin pour rendre un module disponible en tant que variable globale. Ce plugin inclut uniquement le module dans les modules où vous l'utilisez.

// webpack.config.js
const webpack = require('webpack');
const path = require('path');

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      utils: 'utils',
    }),
  ],
};

3. DefinePlugin

Utilisez DefinePlugin pour définir des constantes globales sous forme de chaînes JSON.

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      PRODUCTION: JSON.stringify(true),
      VERSION: JSON.stringify('5fa3b9'),
    }),
  ],
};

4. Objet global

Accédez à l'objet global (fenêtre dans les navigateurs, global dans Node) pour définir des variables globales.

// SPA or browser environment
window.foo = 'bar';

// Webpack will convert global to window
global.foo = 'bar';

5. Dotenv (côté serveur)

Utilisez le package dotenv pour charger des variables d'environnement à partir d'un fichier .env dans le process.env de Node.

// server.js
require('dotenv').config();

const db = require('db');
db.connect({
  host: process.env.DB_HOST,
  username: process.env.DB_USER,
  password: process.env.DB_PASS,
});

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!