Verschiedene korrekte Haltungen zur Verwendung von Umgebungsvariablen in Webpack

Schreiben Sie vor

Machen Sie sich immer noch Sorgen über die verschiedenen Verpackungskonfigurationen in Webpack?

Heute sprechen wir über verschiedene Möglichkeiten zum Einfügen von Umgebungsvariablen in Webpack. Oder denken Sie, dass das Einfügen von Umgebungsvariablen über die Befehlszeile nicht ausreicht?

Wenn Sie diese Idee haben, werden Sie meiner Meinung nach etwas anderes daraus gewinnen, wenn Sie geduldig weiterlesen.

Schließlich handelt es sich beim Wachstum um einen Prozess der schrittweisen Anhäufung. Lassen Sie uns über die richtige Verwendung von Umgebungsvariablen in Webpack 5 sprechen.

Dieser Artikel erläutert die Umgebungsvariablen im Webpack-Prozess aus drei Blickwinkeln:

• Fügen Sie Webpack-Umgebungsvariablen in den Geschäftscode ein.
• Der offizielle Build-Prozess verwendet Webpack-Umgebungsvariablen.
• Die herkömmliche Methode mit Umgebungsvariablen verwendet Umgebungsvariablen für den Build-Prozess von Webpack.

Geschäftscode verwendet Umgebungsvariablen

Verwenden Sie das Plugin webpack.DefinePlugin, um Umgebungsvariablen in Geschäftscode einzufügen

Ich glaube, dass viele Studenten dieses Szenario bereits angewendet haben. Wir müssen während des Verpackungsprozesses einige globale Variablen über Webpack einfügen und sie im Geschäftscode verwenden.
Unsere Geschäftseintragsdatei hat beispielsweise einen solchen Code:

// src/main.js
console.log('Hallo, Umgebungsvariable', __WEPBACK__ENV)

Wir hoffen, dass der Geschäftscode, wenn er auf die Variable __WEBPACK__ENV stößt, diese Variable erkennt und die richtigen Zeichenfolgenwertpakete ausgibt.

Überlegen Sie, was wir tun sollten?

Studenten, die mit Webpack vertraut sind, haben tatsächlich daran gedacht. Wir können es über das Plugin definePlugins in Webpack einfügen:

const wepback = erfordern('webpack')
// webpack.config.js
...
neues webpack.DefinePlugin({
  __WEBPACK__ENV: JSON.stringify('Pakete'),
  ZWEI: '1+1',
});

Wenn wir diese Konfiguration zu den Webpack-Plugins hinzugefügt haben und beim Ausführen des Verpackungsbefehls die Variable __WEBPACK__ENV in unserem Geschäftscode erscheint, können wir sie durch die Zeichenfolge „packages“ ersetzen und so einen ähnlichen Effekt wie bei der Umgebungsvariableneinfügung erzielen.

Überlegungen ausgelöst durch webpack.DefinePlugin

Vielleicht bist du bereits mit der Verwendung des Plugins webpack.definePlugins vertraut. Keine Sorge, schauen wir es uns in Ruhe an. Dieser Code bringt uns zu folgenden Gedanken:

1. „Pakete“ ist bereits vom Zeichenfolgentyp. Warum müssen wir JSON.stringify() verwenden, um es zu verarbeiten?
2. Sind die Umgebungsvariablen zu diesem Zeitpunkt wirklich die sogenannten Umgebungsvariablen?

Lassen Sie uns zunächst diese beiden Probleme diskutieren:

definePlugin sogenannte "Umgebungsvariablen" Implementierung

In der offiziellen Webpack-Dokumentation heißt es dazu

(Beachten Sie, dass das Plugin einen direkten Textersatz durchführt und der ihm zugewiesene Wert tatsächliche Anführungszeichen innerhalb der Zeichenfolge selbst enthalten muss. Normalerweise geschieht dies entweder mit alternativen Anführungszeichen, wie z. B. „Produktion“, oder durch Verwendung von JSON.stringify(„Produktion“).)

Tatsächlich sagt er nur, dass webpack.definePlugins im Wesentlichen ein String-Ersatz im Verpackungsprozess ist, wie das __WEBPACK__ENV:JSON.stringify('packages'), das wir gerade definiert haben.

Wenn während des Verpackungsprozesses __WEPBACK__ENV in unserem Code verwendet wird, ersetzt webpack seinen Wert durch den in den entsprechenden definePlugins definierten Wert. Im Wesentlichen handelt es sich um einen passenden String-Ersatz und nicht um die herkömmliche Umgebungsvariablen-Prozesseinfügung.

Dies beantwortet auch unsere zweite Frage.

JSON.stringify() verarbeitet Umgebungsvariablen

Schauen wir uns als Nächstes die erste Frage an. Wie das Sprichwort sagt: Übung macht den Meister. Versuchen wir, die beiden unterschiedlichen definePlugin-Konfigurationen zu vergleichen, um die Ergebnisse zu sehen:

// webpack.config.js
neues webpack.DefinePlugin({
  __WEBPACK__ENV: JSON.stringify('Pakete'),
  ZWEI: '1+1',
});

// Gepackter Code Hier schließen wir devtools, um den gepackten Code aufzulisten console.log('hallo, Umgebungsvariable', 'Pakete')

// webpack.config.js
neues webpack.DefinePlugin({
  __WEBPACK__ENV: 'Pakete',
  ZWEI: '1+1',
});

// Gepackter Code Hier schließen wir devtools, um den gepackten Code aufzulisten console.log('hallo, Umgebungsvariable', Pakete)

Vergleicht man die beiden Codes sorgfältig, ist die Antwort auf die erste Frage sehr klar. Wenn wir definePlugin verwenden, um globale Schlüssel:Wert-Variablen zu definieren, wird der Text direkt durch den Wert ersetzt. Daher verwenden wir normalerweise JSON.stringify('pacakges') oder "'packages'".

Wir haben den Prozess von DefinePlugin und die Details, die besondere Aufmerksamkeit erfordern, fast erklärt, aber an dieser Stelle definieren wir die sogenannten globalen Variablen zur Verwendung im Geschäftscode. Wenn wir jedoch derzeit Umgebungsvariablen im Verpackungs- und Erstellungsprozess verwenden möchten, benötigen wir eine andere Möglichkeit, sie einzufügen.

Verwenden von Umgebungsvariablen während des Build-Prozesses

Normalerweise müssen wir bei der Verwendung von Webpack Umgebungsvariablen für dynamisches Verpacken entsprechend unseren individuellen Anforderungen verwenden. Beispielsweise können wir Ordner im Projekt dynamisch lesen und dynamisch mit Benutzern in der Konsole interagieren, um verschiedene Pakete zu verpacken.

Zu diesem Zeitpunkt ist es sehr wichtig, Umgebungsvariablen im Build-Prozess zu verwenden. Die sogenannte Verwendung von Umgebungsvariablen im Build-Prozess bedeutet einfach, Umgebungsvariablen in Nicht-Geschäftscode einzufügen, beispielsweise in die Konfigurationsdatei webpack.config.js.

Sehen wir uns an, wie wir diese Codezeile in unser Projekt einfügen:

npx webpack --env Ziel=lokal --env Produktion --Fortschritt --config ./webpack.config.js

An diesem Punkt entspricht diese Codezeile dem Ausführen von webpack, um die Konfigurationsdatei webpack.config.js im aktuellen Verzeichnis zum Verpacken zu lesen und zwei Umgebungsvariablen „goal“ und „progress“ einzufügen, deren Werte „local“ bzw. „true“ sind.

Auf diese Weise können wir die eingefügten Umgebungsvariablen in der Konfigurationsdatei verwenden:

const path = require('Pfad');

module.exports = (Umgebung) => {
  // Verwenden Sie hier env.<IHRE VARIABLE>:
  console.log('Ziel: ', env.goal); // 'lokal'
  console.log('Produktion: ', env.production); // wahr

  zurückkehren {
    Eintrag: './src/index.js',
    Ausgabe: {
      Dateiname: „bundle.js“,
      Pfad: Pfad.auflösen(__dirname, 'dist'),
    },
  };
};

Aufmerksame Benutzer haben möglicherweise bemerkt, dass unser module.exports hier eine Funktion exportiert, die env enthält, und kein herkömmliches Objekt.

Normalerweise verweist module.exports auf ein Konfigurationsobjekt. Um Umgebungsvariablen zu verwenden, müssen Sie module.exports in eine Funktion konvertieren.
Sehen wir uns an, was passiert, wenn wir eine Funktion nicht verwenden:

const path = require('Pfad');

// Verwenden Sie hier env.<IHRE VARIABLE>:
console.log('Ziel: ', process.env.goal); // undefiniert
console.log('Produktion: ', process.env.production); // undefiniert

modul.exporte = {
  Eintrag: './src/index.js',
  Ausgabe: {
    Dateiname: „bundle.js“,
    Pfad: Pfad.auflösen(__dirname, 'dist'),
  },
};

Wir können sehen, dass beim Lesen von env.goal/production im Knotenprozess beide nicht definiert sind.

Das heißt, wenn wir normalerweise --env verwenden, um Umgebungsvariablen in den Webpack-Build-Prozess in der Befehlszeile einzufügen, müssen wir die module.exports der Konfigurationsdatei in Form einer Funktion exportieren, um den entsprechenden Schlüssel im ersten Parameter der Funktion zu erhalten und den entsprechenden Umgebungsvariablenwert zu erhalten.

Also, hier kommt die Frage noch einmal, oder? Was ist, wenn ich nur die entsprechenden Umgebungsvariablen im Knotenprozess abrufen möchte? Was soll ich tun, ich möchte einfach keine Funktion schreiben.

Die herkömmliche Methode mit Umgebungsvariablen verwendet Umgebungsvariablen für den Build-Prozess von Webpack.

Was sollte ich tun? Tatsächlich besteht das Prinzip der Webpack-Verpackung darin, unsere Konfigurationsdatei (Node.js-Konfigurationsdatei) über Shell-Befehle auszuführen.

Was wäre, wenn wir beim Ausführen des Webpack-Befehls echte traditionelle Umgebungsvariablen anstelle von --env einfügen würden? Als nächstes versuchen wir es ~

Hier verwenden wir ein sehr nützliches Plug-In für Umgebungsvariablen namens „cross-env“, das sehr einfach zu verwenden ist und uns dabei helfen kann, Laufzeitumgebungsvariablen in unterschiedlichen Umgebungen wie Linux/Windows auf die gleiche Weise einzufügen... Als Nächstes verwenden wir es:

Vergessen Sie nicht, npm install --save-dev cross-env zu installieren.

// paket.json
 "Build": "umgebungsübergreifender NAME_W=aaa webpack --config ./webpack.config.js"

Wir haben eine Umgebungsvariable über cross-env NAME_W=aaa eingefügt.

// webpack.config.js
Konsole.log(Prozess.Umgebung.NAME_W, 'Umgebung'); // 'aaa'

modul.exporte = {
  Eintrag: './src/a.js',
};

Nach unseren Versuchen stellten wir fest, dass es tatsächlich möglich ist, Umgebungsvariablen über die herkömmliche Befehlszeilenmethode einzufügen! Auf diese Weise umgehen wir die Einschränkung, dass der Export eine Funktion sein muss und tun kann, was wir wollen.

Zusammenfassen

Beim Aufbau von Webpacks und im Geschäftscode ist uns das Einfügen von Umgebungsvariablen eine große Hilfe. Wenn ein bestimmtes System von Front-End-Engineering-Code erforderlich ist, spielen Umgebungsvariablen sowohl im Build-Prozess als auch im Geschäftscode eine entscheidende Rolle.

Da wir hier bereits alles besprochen haben, was wir sagen wollten, fassen wir es kurz zusammen:

Wenn wir beim Packen von Geschäftscode durch Webpack einige globale Variablen auf ähnliche Weise wie Umgebungsvariablen verwenden müssen, können wir mit webpack.DefinePlugin einige Variablen zur Verwendung im Geschäftscode definieren. (Beachten Sie jedoch das oben erwähnte JSON.stringify()).

Gleichzeitig können wir während des Build-Prozesses die durch --env definierten Umgebungsvariablen über den offiziell von webpack bereitgestellten Parameter --env und die Funktion module.exports in der Konfigurationsdatei verwenden.

Gleichzeitig können Sie den Einschränkungen von webpack auch „entkommen“, indem Sie Umgebungsvariablen auf die Art und Weise einfügen, wie wir es in unserem täglichen Leben während des Build-Prozesses verwenden, indem Sie die in der Befehlszeile definierten Umgebungsvariablen direkt verwenden und sie dann über process.env.xxx abrufen.

Dies ist das Ende dieses Artikels über die Verwendung von Umgebungsvariablen in Webpack. Weitere Informationen zur Verwendung von Umgebungsvariablen in Webpack finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!