Webpack - kann keine globalen Variablen setzen, außer als 'process.env'

Question

eingestellt

Ich habe eine React App mit Webpack Version 3.6.0, und ich habe Probleme mit DefinePlugin, um globale Variablen zu setzen - Werte, die gesetzt sind 'normal', wie in der documentation sind nicht in der gesamten App verfügbar ... jedoch, wenn ich Werte in ein Objekt mit dem Namen process.env umschließen, sind die Variablen in der gesamten App verfügbar, wenn auch mit dem Präfix process.env.

Zum Beispiel, hier ist das, was würde ich meine DefinePlugin mag so aussehen:

plugins: [ 
    new Webpack.DefinePlugin({ 
     "NODE_ENV": process.env.NODE_ENV ? JSON.stringify(process.env.NODE_ENV) : JSON.stringify("development"), 
     "SIGNUP_PATH": JSON.stringify("signup") 
    }) 
] 

das funktioniert nicht - versuchen zu console.log(NODE_ENV) oder console.log(SIGNUP_PATH) nichts tut, die Variablen undefined. Überraschenderweise

(oder vielleicht auch nicht, vielleicht gibt es nur etwas, ich weiß nicht), das funktioniert:

plugins: [ 
    new Webpack.DefinePlugin({ 
     "process.env": { 
      "NODE_ENV": process.env.NODE_ENV ? JSON.stringify(process.env.NODE_ENV) : JSON.stringify("development"), 
      "SIGNUP_PATH": JSON.stringify("signup") 
     } 
    }) 
] 

und ich kann die Variablen zugreifen mit console.log(process.env.NODE_ENV) und console.log(process.env.SIGNUP_PATH) usw.

Warum ist es, dass ich alles in ein Objekt mit dem Namen process.env setzen muss, um darauf zuzugreifen, wie ich global wäre? Mache ich hier etwas falsch oder verstehe ich etwas nicht?

Answer 1

lassen Sie die Anführungszeichen weg. "NODE_ENV" sollte NODE_ENV sein

Answer 2

Hier ist ein Arbeitsbeispiel. Überall In meinem Code kann ich Referenz __ __ API_URL

require('dotenv').config({ path: `${__dirname}/src/.dev.env` }); 
const production = process.env.NODE_ENV === 'production'; 

const { DefinePlugin, EnvironmentPlugin } = require('webpack'); 
const HtmlPlugin = require('html-webpack-plugin'); 
const CleanPlugin = require('clean-webpack-plugin'); 
const UglifyPlugin = require('uglifyjs-webpack-plugin'); 
const ExtractPlugin = require('extract-text-webpack-plugin'); 

let plugins = [ 
    new EnvironmentPlugin(['NODE_ENV']), 
    new ExtractPlugin('bundle-[hash].css'), 
    new HtmlPlugin({ template: `${__dirname}/src/index.html` }), 
    new DefinePlugin({ 
    __DEBUG__: JSON.stringify(!production), 
    __API_URL__: JSON.stringify(process.env.API_URL), 
    __GOOGLE_CLIENT_ID__: JSON.stringify(process.env.GOOGLE_CLIENT_ID), 
    __AWS_ACCESS_KEY_ID__: JSON.stringify(process.env.AWS_ACCESS_KEY_ID), 
    __AWS_SECRET_ACCESS_KEY__: JSON.stringify(process.env.AWS_SECRET_ACCESS_KEY), 
    }), 
];