Übergeben von umgebungsabhängigen Variablen im Webpack

306

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?

kpg
quelle
1
Hat Alias ​​für Sie gearbeitet?
Juho Vepsäläinen
1
@bebraw: Bevor ich mich mit Aliasnamen auseinandersetzen konnte, habe ich die andere von Ihnen vorgeschlagene Lösung basierend auf DefinePlugin () implementiert. Ich sehe jetzt, dass Alias ​​eine bessere Lösung wäre und wahrscheinlich irgendwann umgestaltet wird - danke. Wenn Sie Ihre beiden Lösungen in eine Antwort aufnehmen möchten, akzeptiere ich dies gerne.
kpg
2
Wurde hier per Konsolenmeldung verwiesen. Wie behebe ich das in Browserify?
GN.
2
Versucht diese Frage, das SPA zur Erstellungs- oder Ladezeit zu konfigurieren? Ich stelle zwei Arten der Konfiguration für SPAs fest: 1) Entwicklungs- oder Produktionsmodus und 2) Bereitstellungsumgebung, z. B. Entwicklung, Staging, Produktion. Ich denke, NODE_ENV kann verwendet werden, um (1) zur Erstellungszeit zu konfigurieren, aber wie konfigurieren wir (2) bei der Bereitstellung, z. B. zum Konfigurieren eines Produktionsmodus für verschiedene Bereitstellungsumgebungen. Ich hoffe, dass dies für diese Frage relevant ist.
Ashley Aitken
1
@AshleyAitken Große Frage, auf die ich keine Antwort auf diesen Thread finden konnte (vielleicht habe ich sie verpasst), aber diesen neuen Thread gepostet: stackoverflow.com/questions/44464504/…
David Tesar

Antworten:

427

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',
    ...
};
Juho Vepsäläinen
quelle
3
Vielen Dank für den Hinweis, dass es die Übereinstimmungen "wie sie sind" ersetzt. Ich war eine Zeit lang kämpfen, um herauszufinden , warum mein Code einen Fehler wirft , und es war , weil ich nicht den Wert in einem Verpackung wurdeJSON.stringify()
pbojinov
4
Wenn Sie ES2015 verwenden, können Sie auch die Zeichenfolgeninterpolation verwenden -'process.env.NODE_ENV': `"${process.env.NODE_ENV || 'development'}"`
user2688473
1
@ tybro0103 JSON.stringify('development')wie es ist vielleicht nicht wirklich nützlich. Stattdessen JSON.stringify(someVariable)kann es durchaus sein!
Superjos
1
Sie sollten sich darauf einstellen NODE_ENV. Wie Sie dies einstellen, hängt von Ihrer Plattform ab.
Juho Vepsäläinen
1
@AnyulRivas Ja. React verwendet process.env.NODE_ENVMuster und es funktioniert.
Juho Vepsäläinen
109

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.

zer0chain
quelle
2
Gibt es dafür Unterlagen? Ich kann nicht Google --define :(
Richard
5
Für Webpack @ 2 ist "-p" bereits eine Abkürzung für --optimize-minim
--define
@okm Docs Erwähnung -p Entspricht --optimize-minimieren --optimize-Auftrittsreihenfolge, daher wird --define process.env.NODE_ENV = "Produktion" nicht erwähnt. Ist es etwas, das entfernt wurde?
Nader Ghanbari
1
@NaderHadjiGhanbari Es ist in Webpack Version 2 webpack.js.org/api/cli/#shortcuts
okm
73

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.

thevangelist
quelle
2
Haben Sie festgestellt, dass dadurch keine Umgebungsvariablen zur Laufzeit übergeben wurden? Wenn Sie die gesamte ersetzen process.envdann nicht process.env.PORTzum Beispiel Entschlossenheit, undefineddie während der webpack Build bedeutet , können Sie nicht mehr auf den Hafen von der Umgebung außer Kraft setzen?
Djskinner
Vielen Dank. Endlich eine verständliche Antwort zu diesem Thema!
Dave Sag
Was ist ein Prozess? woher kommt es Wenn es sich um ein Knotenobjekt handelt, wie gelangt es in den Browser?
Daniel Birowsky Popeski
Dies ist eine schreckliche Lösung, Sie haben zwei webpack.configs fast völlig identisch, außer NODE_ENV und API_URL
Brian Ogden
1
@BrianOgden Ja, es ist in der Tat so, dass Sie so etwas wie Webpack-Merge verwenden sollten: npmjs.com/package/webpack-merge - Es ist ein bisschen außerhalb des Rahmens für diese Frage IMO.
Thevangelist
24

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

andruso
quelle
22

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.

Kuhess
quelle
4
In den Webpack-Dokumenten gibt es ein Beispiel für diesen Anwendungsfall. github.com/webpack/docs/wiki/list-of-plugins#environmentplugin
Technetium
1
Wenn Sie Ihre Umgebungsvariablen in eine .env-Datei einfügen möchten, können Sie das dotenv-Paket verwenden und in webpack.config.js initialisieren. npmjs.com/package/dotenv
Justin McCandless
13

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

Goblinlord
quelle
Wenn die Werte für den Prozess definieren bevorzugen 'process.env.NODE_ENV': JSON.stringify('production')über process: { 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.
Slorenzo
13

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

Abhijeet
quelle
11

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]
Prosti
quelle
3

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

hannes neukermans
quelle
2

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

Siva Kandaraj
quelle
2

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 .

ruddra
quelle
1

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

ericsoco
quelle
1

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
}),
cbaigorri
quelle
0

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"],
    };
};
Ernesto
quelle
"Am Ende steigern Sie Ihre geheimen Dinge, es sei denn, Sie fügen gitignore ein Webpack hinzu." @Ernesto kannst du das überhaupt erweitern?
Katie Byers
Grundsätzlich endet Ihr Bundle ohne process.env.BLAHBLAH und gibt den tatsächlichen Wert an. Zum Beispiel, anstatt process.env.NODE_ENV zu haben und am Ende „Produktion“ zu haben, meine ich, dass dies nicht das beste Beispiel ist, aber stellen Sie sich einen geheimen Schlüssel vor. Ihr Bündel wird den tatsächlichen Wert haben und wer weiß, wofür diese verdrahtete Schnur steht Ernest♀️
Ernesto
Hmmm - ja, werden diese Werte in der interpoliert werden gebaut Version, aber vermutlich sind Sie nicht , dass auf GitHub schieben ...
Katie Byers
-4

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.

John Skoumbourdis
quelle