Ich versuche eine eckige App von gulp in webpack umzuwandeln. In gulp verwende ich gulp-preprocess, um einige Variablen auf der HTML-Seite (z. B. den Datenbanknamen) abhängig von NODE_ENV zu ersetzen. Was ist der beste Weg, um mit Webpack ein ähnliches Ergebnis zu erzielen?
javascript
webpack
kpg
quelle
quelle
Antworten:
Es gibt zwei grundlegende Möglichkeiten, um dies zu erreichen.
DefinePlugin
Beachten Sie, dass dies nur die Übereinstimmungen "wie sie sind" ersetzt. Deshalb hat die Zeichenfolge das Format, das sie hat. Sie könnten eine komplexere Struktur haben, beispielsweise ein Objekt, aber Sie haben die Idee.
EnvironmentPlugin
EnvironmentPlugin
VerwendetDefinePlugin
intern verwendet und ordnet die Umgebungswerte dem Code zu. Terser-Syntax.Alias
Alternativ können Sie die Konfiguration über ein Alias-Modul verwenden . Von der Verbraucherseite würde es so aussehen:
Die Konfiguration selbst könnte folgendermaßen aussehen:
Sagen wir
process.env.NODE_ENV
istdevelopment
. Es würde dann abbilden./config/development.js
. Das Modul, dem es zugeordnet ist, kann die folgende Konfiguration exportieren:quelle
JSON.stringify()
'process.env.NODE_ENV': `"${process.env.NODE_ENV || 'development'}"`
JSON.stringify('development')
wie es ist vielleicht nicht wirklich nützlich. StattdessenJSON.stringify(someVariable)
kann es durchaus sein!NODE_ENV
. Wie Sie dies einstellen, hängt von Ihrer Plattform ab.process.env.NODE_ENV
Muster und es funktioniert.Nur eine weitere Option: Wenn Sie nur eine CLI-Oberfläche verwenden möchten, verwenden Sie einfach die
define
Option Webpack. Ich füge das folgende Skript in meinpackage.json
:Also muss ich einfach rennen
npm run build-production
.quelle
Ich habe einige Optionen zum Festlegen umgebungsspezifischer Variablen untersucht und dabei Folgendes festgestellt:
Ich habe derzeit 2 Webpack-Konfigurationen:
webpack.production.config.js
webpack.config.js
In meinem Code erhalte ich den Wert von API_URL auf folgende (kurze) Weise:
const apiUrl = process.env.API_URL;
BEARBEITEN 3. November 2016
Webpack-Dokumente haben ein Beispiel: https://webpack.js.org/plugins/define-plugin/#usage
Mit ESLint müssen Sie undefinierte Variablen im Code speziell zulassen, wenn Sie die
no-undef
Regel aktiviert haben . http://eslint.org/docs/rules/no-undef wie folgt :EDIT 7. September 2017 (Create-React-App spezifisch)
Wenn Sie nicht zu viel konfigurieren möchten, lesen Sie Create-React-App: Create-React-App - Hinzufügen benutzerdefinierter Umgebungsvariablen . Unter der Haube benutzt CRA sowieso Webpack.
quelle
process.env
dann nichtprocess.env.PORT
zum Beispiel Entschlossenheit,undefined
die während der webpack Build bedeutet , können Sie nicht mehr auf den Hafen von der Umgebung außer Kraft setzen?Sie können jedes Befehlszeilenargument ohne zusätzliche Plugins übergeben, indem Sie
--env
seit Webpack 2:Verwenden der Variablen in webpack.config.js:
Quelle
quelle
Sie können das
EnvironmentPlugin
verfügbare in direkt verwendenwebpack
, um während der Transpilation auf alle Umgebungsvariablen zuzugreifen.Sie müssen nur das Plugin in Ihrer
webpack.config.js
Datei deklarieren :Beachten Sie, dass Sie den Namen der Umgebungsvariablen, die Sie verwenden möchten, explizit deklarieren müssen.
quelle
Um die Reihe der Antworten persönlich zu ergänzen, bevorzuge ich Folgendes:
Wenn Sie dies verwenden, gibt es keine funky env-Variablen oder plattformübergreifenden Probleme (mit env vars). Alles, was Sie tun, ist normal
webpack
oderwebpack -p
für Entwickler bzw. Produktion.Referenz: Github-Problem
quelle
'process.env.NODE_ENV': JSON.stringify('production')
überprocess: { env: { NODE_ENV: JSON.stringify('production') } }
. Wenn Sie Letzteres verwenden, wird das Prozessobjekt überschrieben, wodurch die Kompatibilität mit einigen Modulen beeinträchtigt werden kann, die erwarten, dass andere Werte für das Prozessobjekt definiert werden.Da meine Bearbeitung des obigen Beitrags durch den Evangelisten nicht genehmigt wurde , wurden zusätzliche Informationen veröffentlicht.
Wenn Sie einen Wert aus package.json wie eine definierte Versionsnummer auswählen und über DefinePlugin in Javascript darauf zugreifen möchten .
Importieren Sie dann package.json in die entsprechende webpack.config , greifen Sie mit der Importvariablen auf das Attribut zu und verwenden Sie das Attribut im DefinePlugin .
Beispielsweise verwendet eine bestimmte Konfiguration in webpack.config METADATA für DefinePlugin:
Greifen Sie in einer beliebigen Typoskriptdatei darauf zu:
Der klügste Weg wäre wie folgt:
Vielen Dank an Ross Allen
quelle
Nur eine weitere Antwort, die der Antwort von @ zer0chain ähnelt. Mit einer Unterscheidung.
Die Einstellung
webpack -p
ist ausreichend.Es ist das gleiche wie:
Und das ist das gleiche wie
Daher benötigen Sie möglicherweise nur so etwas in der
package.json
Knotendatei:Nur ein paar Tipps vom DefinePlugin :
Damit können Sie überprüfen, ob Sie tippen
webpack --help
quelle
So ergänzen Sie die Antworten:
Verwenden Sie ExtendedDefinePlugin anstelle von DefinePlugin
ExtendedDefinePlugin ist viel einfacher zu bedienen und dokumentiert :-) Link
Da DefinePlugin keine gute Dokumentation enthält, möchte ich helfen, indem ich sage, dass es tatsächlich wie #DEFINE in c # funktioniert .
Wenn Sie also verstehen möchten, wie DefinePlugin funktioniert, lesen Sie die c # #define-Doucmentation. Verknüpfung
quelle
Ich bevorzuge die Verwendung einer .env-Datei für eine andere Umgebung.
env.dev
nach .env in den Stammordner zu kopierenenv.prod
nach .env zu kopierenund im Code
verwenden
require('dotenv').config(); const API = process.env.API ## which will store the value from .env file
quelle
Ich fand die folgende Lösung am einfachsten, um Umgebungsvariablen für Webpack 2 einzurichten:
Zum Beispiel haben wir Webpack-Einstellungen:
Umgebungsvariable in Webpack hinzufügen:
Definieren Sie die Plugin-Variable und fügen Sie sie hinzu
plugins
:Wenn Sie nun den Befehl webpack ausführen, übergeben Sie
env.NODE_ENV
als Argument:Jetzt können Sie
NODE_ENV
überall in Ihrem Code auf Variablen zugreifen .quelle
Seit Webpack v4 wird durch einfaches Einstellen
mode
in Ihrer Webpack-Konfiguration dasNODE_ENV
für Sie (überDefinePlugin
) festgelegt. Docs hier.quelle
Hier ist ein Weg, der für mich funktioniert hat und es mir ermöglicht hat, meine Umgebungsvariablen durch Wiederverwendung einer JSON-Datei trocken zu halten.
quelle
Ich bin kein großer Fan von ...
... da es keinerlei Sicherheit bietet. Stattdessen steigern Sie am Ende Ihre geheimen Dinge, es sei denn, Sie fügen gitignore ein Webpack hinzu. Es gibt eine bessere Lösung.
Grundsätzlich werden mit dieser Konfiguration, sobald Sie Ihren Code kompiliert haben, alle Prozess-Env-Variablen aus dem gesamten Code entfernt. Dank des Babel-Plugins
transform-inline-environment-variables
PS wird es keinen einzigen process.env.VAR geben, wenn Sie nicht enden möchten Stellen Sie bei einer ganzen Reihe von Undefinierten sicher, dass Sie die Datei env.js aufrufen, bevor das Webpack babel-loader aufruft. Deshalb ist es das erste, was das Webpack aufruft. Das Array von vars in der Datei babel.config.js muss mit dem Objekt in env.js übereinstimmen. Jetzt gibt es nur noch eine Mähsache. Wenn Sie eine.env
Datei hinzufügen , legen Sie alle Ihre env-Variablen dort ab. Die Datei muss sich im Stammverzeichnis des Projekts befinden. Sie können sie auch hinzufügen, wo immer Sie möchten. Stellen Sie einfach sicher, dass Sie denselben Speicherort in der Datei env.js festlegen und auch hinzufügen GitignoreWenn du das ganze babel + webpack + ts sehen willst, hol es dir von heaw
https://github.com/EnetoJara/Node-typescript-babel-webpack.git
und die gleiche Logik gilt für die Reaktion und alle anderen 💩
env.js
Webpack-Datei ohne Plugins Troll
babel.config.js
quelle
Ich weiß nicht warum, aber niemand erwähnt wirklich die einfachste Lösung. Das funktioniert bei mir für nodejs und grunzen. Da das Webpack für viele Menschen verwirrend sein kann, können Sie einfach die folgende Zeile verwenden:
process.env.NODE_ENV = 'production';
Mit der oben genannten Lösung müssen Sie nicht unbedingt envify oder webpack verwenden. Manchmal funktioniert die einfache fest codierte Lösung bei manchen Menschen.
quelle