Übergeben von umgebungsabhängigen Variablen im Webpack

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?

Es gibt zwei grundlegende Möglichkeiten, um dies zu erreichen.

DefinePlugin

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),

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

new webpack.EnvironmentPlugin(['NODE_ENV'])

EnvironmentPlugin Verwendet DefinePlugin 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:

var config = require('config');

Die Konfiguration selbst könnte folgendermaßen aussehen:

resolve: {
    alias: {
        config: path.join(__dirname, 'config', process.env.NODE_ENV)
    }
}

Sagen wir process.env.NODE_ENVist development. Es würde dann abbilden ./config/development.js. Das Modul, dem es zugeordnet ist, kann die folgende Konfiguration exportieren:

module.exports = {
    testing: 'something',
    ...
};

Nur eine weitere Option: Wenn Sie nur eine CLI-Oberfläche verwenden möchten, verwenden Sie einfach die defineOption Webpack. Ich füge das folgende Skript in mein package.json:

"build-production": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors"

Also muss ich einfach rennen npm run build-production.

Ich habe einige Optionen zum Festlegen umgebungsspezifischer Variablen untersucht und dabei Folgendes festgestellt:

Ich habe derzeit 2 Webpack-Konfigurationen:

webpack.production.config.js

new webpack.DefinePlugin({
  'process.env':{
    'NODE_ENV': JSON.stringify('production'),
    'API_URL': JSON.stringify('http://localhost:8080/bands')
  }
}),

webpack.config.js

new webpack.DefinePlugin({
  'process.env':{
    'NODE_ENV': JSON.stringify('development'),
    'API_URL': JSON.stringify('http://10.10.10.10:8080/bands')
  }
}),

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

new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: JSON.stringify("5fa3b9"),
    BROWSER_SUPPORTS_HTML5: true,
    TWO: "1+1",
    "typeof window": JSON.stringify("object")
})

Mit ESLint müssen Sie undefinierte Variablen im Code speziell zulassen, wenn Sie die no-undefRegel aktiviert haben . http://eslint.org/docs/rules/no-undef wie folgt :

/*global TWO*/
console.log('Running App version ' + TWO);

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.

Sie können jedes Befehlszeilenargument ohne zusätzliche Plugins übergeben, indem Sie --envseit Webpack 2:

webpack --config webpack.config.js --env.foo=bar

Verwenden der Variablen in webpack.config.js:

module.exports = function(env) {
    if (env.foo === 'bar') {
        // do something
    }
}

Quelle

Sie können das EnvironmentPluginverfügbare in direkt verwenden webpack, um während der Transpilation auf alle Umgebungsvariablen zuzugreifen.

Sie müssen nur das Plugin in Ihrer webpack.config.jsDatei deklarieren :

var webpack = require('webpack');

module.exports = {
    /* ... */
    plugins = [
        new webpack.EnvironmentPlugin(['NODE_ENV'])
    ]
};

Beachten Sie, dass Sie den Namen der Umgebungsvariablen, die Sie verwenden möchten, explizit deklarieren müssen.

Um die Reihe der Antworten persönlich zu ergänzen, bevorzuge ich Folgendes:

const webpack = require('webpack');
const prod = process.argv.indexOf('-p') !== -1;

module.exports = {
  ...
  plugins: [
    new webpack.DefinePlugin({
      process: {
        env: {
          NODE_ENV: prod? `"production"`: '"development"'
        }
      }
    }),
    ...
  ]
};

Wenn Sie dies verwenden, gibt es keine funky env-Variablen oder plattformübergreifenden Probleme (mit env vars). Alles, was Sie tun, ist normal webpackoder webpack -pfür Entwickler bzw. Produktion.

Referenz: Github-Problem

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 .

{"version": "0.0.1"}

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 .

const PACKAGE = require('../package.json');
const _version = PACKAGE.version;//Picks the version number from package.json

Beispielsweise verwendet eine bestimmte Konfiguration in webpack.config METADATA für DefinePlugin:

const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
  host: HOST,
  port: PORT,
  ENV: ENV,
  HMR: HMR,
  RELEASE_VERSION:_version//Version attribute retrieved from package.json
});

new DefinePlugin({
        'ENV': JSON.stringify(METADATA.ENV),
        'HMR': METADATA.HMR,
        'process.env': {
          'ENV': JSON.stringify(METADATA.ENV),
          'NODE_ENV': JSON.stringify(METADATA.ENV),
          'HMR': METADATA.HMR,
          'VERSION': JSON.stringify(METADATA.RELEASE_VERSION)//Setting it for the Scripts usage.
        }
      }),

Greifen Sie in einer beliebigen Typoskriptdatei darauf zu:

this.versionNumber = process.env.VERSION;

Der klügste Weg wäre wie folgt:

// webpack.config.js
plugins: [
    new webpack.DefinePlugin({
      VERSION: JSON.stringify(require("./package.json").version)
    })
  ]

Vielen Dank an Ross Allen

Nur eine weitere Antwort, die der Antwort von @ zer0chain ähnelt. Mit einer Unterscheidung.

Die Einstellung webpack -pist ausreichend.

Es ist das gleiche wie:

--define process.env.NODE_ENV="production"

Und das ist das gleiche wie

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  //...

  plugins:[
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
};

Daher benötigen Sie möglicherweise nur so etwas in der package.jsonKnotendatei:

{
  "name": "projectname",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "debug": "webpack -d",
    "production": "webpack -p"
  },
  "author": "prosti",
  "license": "ISC",
  "dependencies": {    
    "webpack": "^2.2.1",
    ...
  }
}

Nur ein paar Tipps vom DefinePlugin :

Mit dem DefinePlugin können Sie globale Konstanten erstellen, die zur Kompilierungszeit konfiguriert werden können. Dies kann nützlich sein, um ein unterschiedliches Verhalten zwischen Entwicklungs- und Release-Builds zuzulassen. Beispielsweise können Sie eine globale Konstante verwenden, um zu bestimmen, ob eine Protokollierung stattfindet. Möglicherweise führen Sie die Protokollierung in Ihrem Entwicklungsbuild durch, jedoch nicht im Release-Build. Das ist das Szenario, das das DefinePlugin ermöglicht.

Damit können Sie überprüfen, ob Sie tippen webpack --help

Config options:
  --config  Path to the config file
                         [string] [default: webpack.config.js or webpackfile.js]
  --env     Enviroment passed to the config, when it is a function

Basic options:
  --context    The root directory for resolving entry point and stats
                                       [string] [default: The current directory]
  --entry      The entry point                                          [string]
  --watch, -w  Watch the filesystem for changes                        [boolean]
  --debug      Switch loaders to debug mode                            [boolean]
  --devtool    Enable devtool for better debugging experience (Example:
               --devtool eval-cheap-module-source-map)                  [string]
  -d           shortcut for --debug --devtool eval-cheap-module-source-map
               --output-pathinfo                                       [boolean]
  -p           shortcut for --optimize-minimize --define
               process.env.NODE_ENV="production" 

                      [boolean]
  --progress   Print compilation progress in percentage                [boolean]

So ergänzen Sie die Antworten:

Verwenden Sie ExtendedDefinePlugin anstelle von DefinePlugin

npm install extended-define-webpack-plugin --save-dev.

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 .

#if (DEBUG)
        Console.WriteLine("Debugging is enabled.");
#endif

Wenn Sie also verstehen möchten, wie DefinePlugin funktioniert, lesen Sie die c # #define-Doucmentation. Verknüpfung

Ich bevorzuge die Verwendung einer .env-Datei für eine andere Umgebung.

1. Verwenden Sie webpack.dev.config, um env.devnach .env in den Stammordner zu kopieren
2. Verwenden Sie webpack.prod.config, um env.prodnach .env zu kopieren

und im Code

verwenden

require('dotenv').config(); const API = process.env.API ## which will store the value from .env file

Ich fand die folgende Lösung am einfachsten, um Umgebungsvariablen für Webpack 2 einzurichten:

Zum Beispiel haben wir Webpack-Einstellungen:

var webpack = require('webpack')

let webpackConfig = (env) => { // Passing envirmonment through
                                // function is important here
    return {
        entry: {
        // entries
        },

        output: {
        // outputs
        },

        plugins: [
        // plugins
        ],

        module: {
        // modules
        },

        resolve: {
        // resolves
        }

    }
};

module.exports = webpackConfig;

Umgebungsvariable in Webpack hinzufügen:

plugins: [
    new webpack.EnvironmentPlugin({
       NODE_ENV: 'development',
       }),
]

Definieren Sie die Plugin-Variable und fügen Sie sie hinzu plugins:

    new webpack.DefinePlugin({
        'NODE_ENV': JSON.stringify(env.NODE_ENV || 'development')
    }),

Wenn Sie nun den Befehl webpack ausführen, übergeben Sie env.NODE_ENVals Argument:

webpack --env.NODE_ENV=development

// OR

webpack --env.NODE_ENV development

Jetzt können Sie NODE_ENVüberall in Ihrem Code auf Variablen zugreifen .

Seit Webpack v4 wird durch einfaches Einstellen modein Ihrer Webpack-Konfiguration das NODE_ENVfür Sie (über DefinePlugin) festgelegt. Docs hier.

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.

const webpack = require('webpack');
let config = require('./settings.json');
if (__PROD__) {
    config = require('./settings-prod.json');
}

const envVars = {};
Object.keys(config).forEach((key) => {
    envVars[key] = JSON.stringify(config[key]);
});

new webpack.DefinePlugin({
    'process.env': envVars
}),

Ich bin kein großer Fan von ...

new webpack.DefinePlugin({
  'process.env': envVars
}),

... 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 .envDatei 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 Gitignore

const dotFiles = ['.env'].filter(Boolean);

if (existsSync(dotFiles)) {
    require("dotenv-expand")(require("dotenv").config((dotFiles)));
}

Wenn 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 💩

config
---webpack.js
---env.js
src
---source code world
.env
bunch of dotFiles

env.js

"use strict";
/***
I took the main idea from CRA, but mine is more cooler xD
*/
const {realpathSync, existsSync} = require('fs');
const {resolve, isAbsolute, delimiter} = require('path');

const NODE_ENV = process.env.NODE_ENV || "development";

const appDirectory = realpathSync(process.cwd());

if (typeof NODE_ENV !== "string") {
    throw new Error("falle and stuff");
}

const dotFiles = ['.env'].filter(Boolean);

if (existsSync(dotFiles)) {
    require("dotenv-expand")(require("dotenv").config((dotFiles)));
}

process.env.NODE_PATH = (process.env.NODE_PATH || "")
    .split(delimiter)
    .filter(folder => folder && isAbsolute(folder))
    .map(folder => resolve(appDirectory, folder))
    .join(delimiter);

const ENETO_APP = /^ENETO_APP_/i;

module.exports = (function () {
    const raw = Object.keys ( process.env )
        .filter ( key => ENETO_APP.test ( key ) )
        .reduce ( ( env, key ) => {
                env[ key ] = process.env[ key ];
                return env;
            },
            {
                BABEL_ENV: process.env.ENETO_APP_BABEL_ENV,
                ENETO_APP_DB_NAME: process.env.ENETO_APP_DB_NAME,
                ENETO_APP_DB_PASSWORD: process.env.ENETO_APP_DB_PASSWORD,
                ENETO_APP_DB_USER: process.env.ENETO_APP_DB_USER,
                GENERATE_SOURCEMAP: process.env.ENETO_APP_GENERATE_SOURCEMAP,
                NODE_ENV: process.env.ENETO_APP_NODE_ENV,
                PORT: process.env.ENETO_APP_PORT,
                PUBLIC_URL: "/"
            } );

    const stringyField = {
        "process.env": Object.keys(raw).reduce((env, key)=> {
            env[key]=JSON.stringify(raw[key]);
            return env;
        },{}),

    };

    return {
        raw, stringyField
    }
})();

Webpack-Datei ohne Plugins Troll

"use strict";

require("core-js");
require("./env.js");

const path = require("path");
const nodeExternals = require("webpack-node-externals");

module.exports = env => {
    return {
        devtool: "source-map",
        entry: path.join(__dirname, '../src/dev.ts'),
        externals: [nodeExternals()],
        module: {
            rules: [
                {
                    exclude: /node_modules/,
                    test: /\.ts$/,
                    use: [
                        {
                            loader: "babel-loader",
                        },
                        {
                            loader: "ts-loader"
                        }
                    ],
                },
                {
                    test: /\.(png|jpg|gif)$/,
                    use: [
                        {
                            loader: "file-loader",
                        },
                    ],
                },
            ],
        },
        node: {
            __dirname: false,
            __filename: false,
        },
        optimization: {
            splitChunks: {
                automaticNameDelimiter: "_",
                cacheGroups: {
                    vendor: {
                        chunks: "initial",
                        minChunks: 2,
                        name: "vendor",
                        test: /[\\/]node_modules[\\/]/,
                    },
                },
            },
        },
        output: {
            chunkFilename: "main.chunk.js",
            filename: "name-bundle.js",
            libraryTarget: "commonjs2",
        },
        plugins: [],
        resolve: {
            extensions: ['.ts', '.js']
        }   ,
        target: "node"
    };
};

babel.config.js

module.exports = api => {

    api.cache(() => process.env.NODE_ENV);

    return {

        plugins: [
            ["@babel/plugin-proposal-decorators", { legacy: true }],
            ["@babel/plugin-transform-classes", {loose: true}],
            ["@babel/plugin-external-helpers"],
            ["@babel/plugin-transform-runtime"],
            ["@babel/plugin-transform-modules-commonjs"],
            ["transform-member-expression-literals"],
            ["transform-property-literals"],
            ["@babel/plugin-transform-reserved-words"],
            ["@babel/plugin-transform-property-mutators"],
            ["@babel/plugin-transform-arrow-functions"],
            ["@babel/plugin-transform-block-scoped-functions"],
            [
                "@babel/plugin-transform-async-to-generator",
                {
                    method: "coroutine",
                    module: "bluebird",
                },
            ],
            ["@babel/plugin-proposal-async-generator-functions"],
            ["@babel/plugin-transform-block-scoping"],
            ["@babel/plugin-transform-computed-properties"],
            ["@babel/plugin-transform-destructuring"],
            ["@babel/plugin-transform-duplicate-keys"],
            ["@babel/plugin-transform-for-of"],
            ["@babel/plugin-transform-function-name"],
            ["@babel/plugin-transform-literals"],
            ["@babel/plugin-transform-object-super"],
            ["@babel/plugin-transform-shorthand-properties"],
            ["@babel/plugin-transform-spread"],
            ["@babel/plugin-transform-template-literals"],
            ["@babel/plugin-transform-exponentiation-operator"],
            ["@babel/plugin-proposal-object-rest-spread"],
            ["@babel/plugin-proposal-do-expressions"],
            ["@babel/plugin-proposal-export-default-from"],
            ["@babel/plugin-proposal-export-namespace-from"],
            ["@babel/plugin-proposal-logical-assignment-operators"],
            ["@babel/plugin-proposal-throw-expressions"],
            [
                "transform-inline-environment-variables",
                {
                    include: [
                        "ENETO_APP_PORT",
                        "ENETO_APP_NODE_ENV",
                        "ENETO_APP_BABEL_ENV",
                        "ENETO_APP_DB_NAME",
                        "ENETO_APP_DB_USER",
                        "ENETO_APP_DB_PASSWORD",
                    ],
                },
            ],
        ],
        presets: [["@babel/preset-env",{
            targets: {
                node: "current",
                esmodules: true
            },
            useBuiltIns: 'entry',
            corejs: 2,
            modules: "cjs"
        }],"@babel/preset-typescript"],
    };
};

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.