Przekazywanie zmiennych zależnych od środowiska w pakiecie internetowym

306

Próbuję przekonwertować aplikację kątową z gulp na webpack. w gulp używam gulp-preprocess do zamiany niektórych zmiennych na stronie HTML (np. nazwa bazy danych) w zależności od NODE_ENV. Jaki jest najlepszy sposób na osiągnięcie podobnego rezultatu z webpackiem?

kpg
źródło
1
Czy alias działał dla Ciebie?
Juho Vepsäläinen
1
@brawraw: zanim udało mi się omijać aliasy, zaimplementowałem inne rozwiązanie, które zasugerowałeś, oparte na DefinePlugin (). Widzę teraz, że alias byłby lepszym rozwiązaniem i prawdopodobnie kiedyś dokona refaktoryzacji - dzięki. Jeśli chcesz dołączyć swoje dwa rozwiązania do odpowiedzi, chętnie je zaakceptuję.
kpg
2
Został skierowany tutaj za pomocą komunikatu konsoli. Jak to naprawić w Browserify?
GN.
2
Czy to pytanie próbuje skonfigurować SPA podczas kompilacji lub ładowania? Zwracam uwagę na dwa typy konfiguracji dla OSO: 1) tryb programowania lub produkcji oraz 2) środowisko wdrażania, np. Programowanie, przemieszczanie, produkcja. Myślę, że NODE_ENV może zostać użyty do skonfigurowania (1) w czasie kompilacji, ale jak skonfigurować (2) przy wdrożeniu, np. Konfigurowanie trybu produkcyjnego dla różnych środowisk wdrażania Mam nadzieję, że ma to związek z tym pytaniem.
Ashley Aitken
1
@AshleyAitken Świetne pytanie, na które nie mogłem znaleźć odpowiedzi w tym wątku (być może mi go brakowało), ale opublikowałem ten nowy wątek: stackoverflow.com/questions/44464504/...
David Tesar

Odpowiedzi:

427

Istnieją dwa podstawowe sposoby osiągnięcia tego celu.

DefinePlugin

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

Pamiętaj, że spowoduje to zastąpienie dopasowań „jak jest”. Dlatego łańcuch ma format, w którym jest. Możesz mieć bardziej złożoną strukturę, na przykład obiekt, ale masz pomysł.

EnvironmentPlugin

new webpack.EnvironmentPlugin(['NODE_ENV'])

EnvironmentPluginużywa DefinePluginwewnętrznie i mapuje wartości środowiska, aby je zakodować. Składnia Terser.

Alias

Alternatywnie możesz zużyć konfigurację za pośrednictwem modułu aliasowego . Od strony konsumenta wyglądałoby to tak:

var config = require('config');

Sama konfiguracja może wyglądać następująco:

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

Powiedzmy, że process.env.NODE_ENVjest development. To by się ./config/development.jswtedy odwzorowało . Moduł, na który mapuje, może eksportować konfigurację w następujący sposób:

module.exports = {
    testing: 'something',
    ...
};
Juho Vepsäläinen
źródło
3
Dziękujemy za zwrócenie uwagi na fakt, że zastępuje dopasowania „jak jest”. Przez chwilę starałem się zrozumieć, dlaczego mój kod JSON.stringify()
generuje
4
Jeśli używasz ES2015, możesz także użyć interpolacji ciągów -'process.env.NODE_ENV': `"${process.env.NODE_ENV || 'development'}"`
user2688473
1
@ tybro0103 JSON.stringify('development')as może nie być naprawdę przydatny. Zamiast tego JSON.stringify(someVariable)może być całkiem!
superjos,
1
Powinieneś NODE_ENVto zrobić. Jak to ustawić, zależy od twojej platformy.
Juho Vepsäläinen,
1
@AnyulRivas Tak. React używa process.env.NODE_ENVwzoru i działa.
Juho Vepsäläinen
109

Kolejna opcja, jeśli chcesz korzystać tylko z interfejsu cli, po prostu skorzystaj z defineopcji webpack. Dodaję następujący skrypt w moim package.json:

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

Więc po prostu muszę biec npm run build-production.

zer0chain
źródło
2
Czy jest na to dokumentacja? Nie mogę Google - zdefiniować :(
Richard,
5
Dla webpack @ 2 „-p” jest już skrótem do --optimize-minimize --define process.env.NODE_ENV = „produkcja”
okm
@okm Docs wzmianka -p Równa się - --optymalizuj-minimalizuj - optymalizuj-występowanie-zamówienia, więc nie wspominaj o --define process.env.NODE_ENV = „produkcja”. Czy to coś, co zostało usunięte?
Nader Ghanbari
1
@NaderHadjiGhanbari Jest w wersji webpack
okm
73

Zbadałem kilka opcji ustawiania zmiennych specyficznych dla środowiska i skończyłem z tym:

Obecnie mam 2 konfiguracje pakietu webpack:

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')
  }
}),

W moim kodzie otrzymuję wartość API_URL w ten (krótki) sposób:

const apiUrl = process.env.API_URL;

EDYCJA 3 listopada 2016 r

Dokumenty pakietu Webpack zawierają przykład: 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")
})

W ESLint musisz w szczególności zezwalać na niezdefiniowane zmienne w kodzie, jeśli masz no-undefwłączone reguły. http://eslint.org/docs/rules/no-undef jak to:

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

EDYCJA 7 września 2017 r. (Specyficzne dla aplikacji Create-React-App)

Jeśli nie chcesz zbyt wiele konfigurować, sprawdź Create-React-App: Create-React-App - Dodawanie niestandardowych zmiennych środowiskowych . Pod maską CRA i tak korzysta z Webpacka.

ewangelista
źródło
2
Czy zauważyłeś, że zapobiegło to przekazaniu zmiennych środowiskowych w czasie wykonywania? Jeśli zastąpisz całość, process.envto process.env.PORTna przykład nie zostanie rozwiązane undefinedpodczas kompilacji pakietu internetowego, co oznacza, że ​​nie możesz już zastąpić portu ze środowiska?
djskinner,
Dzięki wielkie. Wreszcie odpowiedź na to pytanie, która jest zrozumiała!
Dave Sag
co to jest proces skąd on pochodzi? jeśli jest to obiekt węzła, w jaki sposób dostaje się do przeglądarki?
Daniel Birowsky Popeski,
To okropne rozwiązanie, masz dwa pliki webpack.config prawie całkowicie identyczne, z wyjątkiem ustawienia NODE_ENV i API_URL
Brian Ogden
1
@BrianOgden Tak, to prawda, powinieneś użyć do tego czegoś takiego jak webpack-merge: npmjs.com/package/webpack-merge - To trochę poza zakresem tego pytania IMO.
thevangelist
24

Możesz przekazać dowolny argument wiersza poleceń bez dodatkowych wtyczek przy użyciu --envod webpacka 2:

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

Za pomocą zmiennej w pliku webpack.config.js:

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

Źródło

andruso
źródło
22

Możesz użyć bezpośrednio z EnvironmentPlugindostępnych w, webpackaby mieć dostęp do dowolnej zmiennej środowiskowej podczas transpilacji.

Musisz tylko zadeklarować wtyczkę w swoim webpack.config.jspliku:

var webpack = require('webpack');

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

Pamiętaj, że musisz jawnie zadeklarować nazwę zmiennych środowiskowych, których chcesz użyć.

Kuhess
źródło
4
W dokumentacji pakietu Webpack znajduje się przykład z tym przypadkiem użycia. github.com/webpack/docs/wiki/list-of-plugins#environmentplugin
Technetium
1
Jeśli chcesz umieścić zmienne środowiskowe w pliku .env, możesz użyć pakietu dotenv i zainicjować go w pliku webpack.config.js. npmjs.com/package/dotenv
Justin McCandless
13

Aby osobiście dodać do szeregu odpowiedzi, wolę:

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

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

Używając tego, nie ma żadnych funky zmiennych env ani problemów międzyplatformowych (w przypadku zmiennych env). Wszystko, co robisz, to uruchamianie normalnie webpacklub odpowiednio webpack -pdla deweloperów lub produkcji.

Odniesienie: Problem Github

Władca Goblinów
źródło
Przy określaniu wartości dla procesu wolą 'process.env.NODE_ENV': JSON.stringify('production')ponad process: { env: { NODE_ENV: JSON.stringify('production') } }. Użycie tego drugiego spowoduje zastąpienie obiektu procesu, co może zepsuć zgodność z niektórymi modułami, które oczekują, że zostaną zdefiniowane inne wartości w obiekcie procesu.
slorenzo
13

Ponieważ moja edycja powyższego postu przez ewangelistę nie została zatwierdzona , zamieszczam dodatkowe informacje.

Jeśli chcesz wybrać wartość z pliku package.json jak zdefiniowany numer wersji i uzyskać do niej dostęp za pośrednictwem DefinePlugin w JavaScript.

{"version": "0.0.1"}

Następnie importu package.json wewnątrz odpowiedniego webpack.config , dostęp atrybut użyciu zmiennej importu, a następnie za pomocą atrybutu w DefinePlugin .

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

Na przykład niektóre konfiguracje w pliku webpack.config używają METADANE dla 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.
        }
      }),

Dostęp do tego w dowolnym pliku maszynopisu:

this.versionNumber = process.env.VERSION;

Najmądrzejszy sposób wyglądałby następująco:

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

Dzięki Ross Allen

Abhijeet
źródło
11

Kolejna odpowiedź podobna do odpowiedzi @ zer0chain. Jednak z jednym wyróżnieniem.

Ustawienie webpack -pjest wystarczające.

Jest taki sam jak:

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

I to jest to samo co

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

module.exports = {
  //...

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

Dlatego może być potrzebne tylko coś takiego w package.jsonpliku węzła:

{
  "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",
    ...
  }
}

Kilka wskazówek z DefinePlugin :

DefinePlugin pozwala tworzyć globalne stałe, które można konfigurować podczas kompilacji. Może to być przydatne do umożliwienia różnych zachowań między kompilacjami programistycznymi i kompilacjami wydań. Na przykład możesz użyć stałej globalnej, aby ustalić, czy rejestrowanie ma miejsce; być może wykonujesz logowanie w kompilacji programistycznej, ale nie w kompilacji wersji. Taki scenariusz ułatwia DefinePlugin.


To dlatego możesz sprawdzić, czy piszesz 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
źródło
3

Aby dodać do zestawu odpowiedzi:

Użyj ExtendedDefinePlugin zamiast DefinePlugin

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

ExtendedDefinePlugin jest znacznie prostszy w użyciu i jest udokumentowany :-) link

Ponieważ DefinePlugin nie ma dobrej dokumentacji, chcę pomóc, mówiąc, że faktycznie działa jak #DEFINE in c # .

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

Dlatego jeśli chcesz zrozumieć, jak działa DefinePlugin, przeczytaj c #define Doucmentation. połączyć

Hannes Neukermans
źródło
2

Wolę używać pliku .env dla innego środowiska.

  1. Użyj webpack.dev.config, aby skopiować env.devdo .env do folderu głównego
  2. Użyj webpack.prod.config, aby skopiować env.prodna .env

i w kodzie

posługiwać się

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

Siva Kandaraj
źródło
2

Znalazłem następujące rozwiązanie, które jest najłatwiejsze do ustawienia zmiennej środowiskowej dla Webpack 2:

Na przykład mamy ustawienia pakietu internetowego:

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;

Dodaj zmienną środowiskową w pakiecie internetowym:

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

Zdefiniuj zmienną wtyczki i dodaj ją do plugins:

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

Teraz po uruchomieniu polecenia webpack podaj env.NODE_ENVjako argument:

webpack --env.NODE_ENV=development

// OR

webpack --env.NODE_ENV development

Teraz możesz uzyskać dostęp do NODE_ENVzmiennej w dowolnym miejscu w kodzie.

Ruddra
źródło
1

Od wersji Webpack v4, po prostu ustawienie modew konfiguracji pakietu Webpack ustawi NODE_ENVdla ciebie (przez DefinePlugin). Dokumenty tutaj.

ericsoco
źródło
1

Oto sposób, który zadziałał dla mnie i pozwolił mi zachować zmienne środowiskowe w stanie DRY poprzez ponowne użycie pliku json.

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
źródło
0

Nie jestem wielkim fanem ...

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

... ponieważ nie zapewnia żadnego rodzaju bezpieczeństwa. zamiast tego poprawiasz swoje tajne rzeczy, chyba że dodasz webpack do gitignore 🤷‍♀️ istnieje lepsze rozwiązanie.

Zasadniczo w tej konfiguracji po skompilowaniu kodu wszystkie zmienne env procesu zostaną usunięte z całego kodu, nie będzie jednego procesu. Na szczęście VAR w górę dzięki wtyczce babel transform-inline-environment-variables PS, jeśli nie chcesz skończyć z całą masą niezdefiniowanych, upewnij się, że wywołujesz env.js, zanim webpack wywoła babel-loader, dlatego jest to pierwsza rzecz, którą wywołuje webpack. tablica vars w pliku babel.config.js musi pasować do obiektu w env.js. teraz jest tylko jedna rzecz do koszenia. dodaj .envplik umieść tam wszystkie zmienne env, plik musi znajdować się w katalogu głównym projektu lub możesz go dodać gdziekolwiek chcesz, po prostu upewnij się, że ustawiłeś tę samą lokalizację w pliku env.js, a także dodaj go do gitignore

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

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

Jeśli chcesz zobaczyć cały babel + webpack + ts, zdobądź go z heaw https://github.com/EnetoJara/Node-typescript-babel-webpack.git

i ta sama logika dotyczy reakcji i wszystkich innych 💩

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
    }
})();

plik webpack bez wtyczek 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
źródło
„W końcu wzmacniasz swoje tajne rzeczy, chyba że dodasz paczkę do gitignore.” @ Ernesto, czy możesz w ogóle to rozwinąć?
Katie Byers,
Zasadniczo twój pakiet kończy się bez procesu.env.BLAHBLAH i podaje rzeczywistą wartość. Na przykład zamiast procesu.env.NODE_ENV kończysz na „produkcji”, to znaczy nie jest to najlepszy przykład, ale wyobraź sobie tajny klucz. Twój pakiet będzie miał rzeczywistą wartość i kto wie, co oznacza ten sznur przewodowy 🤷‍♀️
Ernesto
Hmmm - tak, te wartości będą interpolowane w wersji wbudowanej , ale przypuszczalnie nie popychasz tego do GitHub ...
Katie Byers
-4

Nie wiem dlaczego, ale tak naprawdę nikt nie wspomina o najprostszym rozwiązaniu. To działa dla mnie na nodejs i chrząknięcie. Ponieważ dla wielu osób webpack może być mylący, możesz po prostu użyć poniższej linii:

process.env.NODE_ENV = 'production';

Dzięki powyższemu rozwiązaniu tak naprawdę nie musisz używać envify ani webpacka. Czasami proste zakodowane rozwiązanie może działać dla niektórych osób.

John Skoumbourdis
źródło