erstellen reagieren App nicht Umgebungsvariable nach dem Bauprozess lesen kann

Question

Ich habe eine app reagieren, mit create-react-app erstellt dann baue ich die App mit dem Befehl: npm run build

Es ist mit serve die App nach dem Bauprozess laufen, wenn wir die App starten mit Entwicklungscode von ENV=production npm run start ausgeführt wird, kann es die process.env.ENV Variable lesen beacause ich Config dieses Plugins webpack dev hinzufügen bin

new webpack.DefinePlugin({ 
     'process.env':{ 
     'ENV': JSON.stringify(process.env.ENV), 
     } 
    }), 

ich auch das Drehbuch hinzufügen oben webpack prod Config, aber wenn ich diesen Befehl versuchen nach bauen ENV=prod serve -s build, es kann die Umgebung nicht lesen Variable

Wie behebe ich das?

Answer 1

Der Grund, warum Sie nicht die ENV var lesen kann, ist, weil:

(1) In Entwicklung Modus webpack Ihre Dateien Uhren und Kombinationen app on the fly. Es wird auch lesen (wegen der DefinePlugin) Ihre process.env.ENV und wird es als eine globale Variable hinzufügen. Es handelt sich also im Grunde um Piping-Variablen von process.env zu Ihrer JS-App.

(2) Nachdem Sie bauen Ihre App (mit webpack) ist alles bereits in einer oder mehreren Dateien gebündelt. Wenn Sie serve ausführen, starten Sie einfach einen HTTP-Server, der die statischen Build-Dateien bereitstellt. Es gibt also keine Möglichkeit, die ENV an Ihre App zu leiten.

Im Grunde ist die DefinePlugin fügt eine var zu dem Bündel hinzu. Z.B.

new webpack.DefinePlugin({ 
    'token': '12356234ga5q3aesd' 
}) 

wird eine Zeile wie hinzufügen:

var token = '12356234ga5q3aesd'; 

da die JS-Dateien ist statische es keine Möglichkeit gibt, diese Variable nach Sie bauen haben zu ändern/gebündelt mit webpack . Grundsätzlich, wenn Sie tun npm run build Sie erstellen die kompilierte Binär/.dll/.jar/... Datei und nicht mehr seinen Inhalt über das Plugin beeinflussen können.