Wie verwalte ich globale Variablen in Webpack?

Ansätze zur Definition globaler Variablen in Webpack

1. Modulinitialisierung

Webpack wertet Module nur einmal aus, sodass Sie ein Modul wie globals.js erstellen können, das ein Objekt globaler Variablen enthält. Sie können dieses Modul in andere Module importieren und seine Eigenschaften ändern oder darauf zugreifen, wobei der globale Geltungsbereich erhalten bleibt.

2. ProvidePlugin von Webpack

Mit diesem Plugin können Sie ein Modul als Variable in jedem Modul verfügbar machen, in dem es verwendet wird. Es vereinfacht den Code, indem es sich wiederholende Importanweisungen eliminiert. Um das ProvidePlugin für Ihr Modul (z. B. utils.js) zu verwenden, geben Sie in Ihrer Webpack-Konfiguration einen Alias ​​für das Modul ein und fügen Sie es wie folgt zum Plugin hinzu:

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

3. DefinePlugin von Webpack

Verwenden Sie dieses Plugin, um globale Konstanten mit Zeichenfolgenwerten zu definieren:

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

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

4. Globales Objekt (Fenster / global)

Dieser Ansatz ermöglicht die Deklaration globaler Variablen direkt im Browser (window.foo = 'bar') oder in einer Node.js-Umgebung (global.foo = 'bar') ). Es wird häufig für Polyfills verwendet.

5. Paket: dotenv

Für serverseitige Projekte ermöglicht dotenv die Definition von Konfigurationsvariablen in einer lokalen Datei (.env) und das automatische Hinzufügen zum Objekt „process.env“ des Knotens.

Das obige ist der detaillierte Inhalt vonWie verwalte ich globale Variablen in Webpack?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!