Melewati variabel yang tergantung lingkungan di webpack

Saya mencoba mengonversi aplikasi sudut dari tegukan ke webpack. dalam gulp saya menggunakan gulp-preprocess untuk mengganti beberapa variabel pada halaman html (mis. nama basis data) tergantung pada NODE_ENV. Apa cara terbaik untuk mencapai hasil yang serupa dengan webpack?

Ada dua cara dasar untuk mencapai ini.

Definisikan Plugin

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

Perhatikan bahwa ini hanya akan mengganti kecocokan "apa adanya". Itu sebabnya string dalam format apa adanya. Anda bisa memiliki struktur yang lebih kompleks, seperti objek di sana tetapi Anda mendapatkan idenya.

Plugin Lingkungan

new webpack.EnvironmentPlugin(['NODE_ENV'])

EnvironmentPluginmenggunakan secara DefinePlugininternal dan memetakan nilai-nilai lingkungan untuk kode melalui itu. Sintaks terser.

Alias

Atau Anda dapat menggunakan konfigurasi melalui modul alias . Dari sisi konsumen akan terlihat seperti ini:

var config = require('config');

Konfigurasi itu sendiri dapat terlihat seperti ini:

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

Mari mengatakan process.env.NODE_ENVadalah development. Itu akan memetakan ke ./config/development.jskemudian. Modul yang dipetakan ke dapat mengekspor konfigurasi seperti ini:

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

Hanya pilihan lain, jika Anda hanya ingin menggunakan antarmuka cli, cukup gunakan defineopsi webpack. Saya menambahkan skrip berikut di package.json:

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

Jadi saya hanya perlu menjalankan npm run build-production.

Saya menyelidiki beberapa opsi tentang cara mengatur variabel khusus lingkungan dan berakhir dengan ini:

Saya memiliki 2 konfigurasi webpack saat ini:

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

Dalam kode saya, saya mendapatkan nilai API_URL dengan cara (singkat) ini:

const apiUrl = process.env.API_URL;

EDIT 3 Nov 2016

Dokumen Webpack memiliki contoh: 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")
})

Dengan ESLint Anda harus secara khusus mengizinkan variabel yang tidak ditentukan dalam kode, jika Anda memiliki no-undefaturan. http://eslint.org/docs/rules/no-undef menyukai ini:

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

EDIT 7 September, 2017 (Khusus-Buat-Reaksi-Aplikasi)

Jika Anda tidak terlalu banyak mengonfigurasi, periksa Create-React-App: Create-React-App - Menambahkan Variabel Lingkungan Kustom . Di bawah kap CRA tetap menggunakan Webpack.

Anda dapat melewati argumen baris perintah apa pun tanpa menggunakan plugin tambahan--env karena webpack 2:

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

Menggunakan variabel di webpack.config.js:

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

Sumber

Anda dapat langsung menggunakan yang EnvironmentPlugintersedia webpackuntuk memiliki akses ke variabel lingkungan apa pun selama transpilasi.

Anda hanya perlu mendeklarasikan plugin di webpack.config.jsfile Anda :

var webpack = require('webpack');

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

Perhatikan bahwa Anda harus mendeklarasikan secara eksplisit nama variabel lingkungan yang ingin Anda gunakan.

Untuk menambah kumpulan jawaban secara pribadi, saya lebih suka yang berikut:

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

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

Menggunakan ini tidak ada variabel env yang funky atau masalah lintas platform (dengan env vars). Yang Anda lakukan adalah menjalankan yang normal webpackatau webpack -puntuk dev atau produksi masing-masing.

Referensi: Masalah Github

Karena Edit saya pada posting di atas oleh thevangelist tidak disetujui , memposting informasi tambahan.

Jika Anda ingin memilih nilai dari package.json seperti nomor versi yang ditentukan dan mengaksesnya melalui DefinePlugin di dalam Javascript.

{"version": "0.0.1"}

Kemudian, Impor package.json di dalam webpack.config masing-masing , akses atribut menggunakan variabel impor, kemudian gunakan atribut di DefinePlugin .

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

Misalnya konfigurasi tertentu di webpack.config menggunakan METADATA untuk 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.
        }
      }),

Akses ini di dalam file naskah apa pun:

this.versionNumber = process.env.VERSION;

Cara paling cerdas akan seperti ini:

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

Terima kasih untuk Ross Allen

Hanya jawaban lain yang mirip dengan jawaban @ zer0chain. Namun, dengan satu perbedaan.

Pengaturan webpack -psudah cukup.

Itu sama dengan:

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

Dan ini sama dengan

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

module.exports = {
  //...

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

Jadi Anda hanya perlu sesuatu seperti ini di package.jsonfile Node:

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

Hanya beberapa tips dari DefinePlugin :

DefinePlugin memungkinkan Anda membuat konstanta global yang dapat dikonfigurasi pada waktu kompilasi. Ini dapat berguna untuk memungkinkan perilaku yang berbeda antara pembangunan dan rilis membangun. Misalnya, Anda dapat menggunakan konstanta global untuk menentukan apakah penebangan terjadi; mungkin Anda melakukan logging di build pengembangan Anda tetapi tidak di build rilis. Itu semacam skenario yang difasilitasi oleh DefinePlugin.

Ini agar Anda dapat memeriksa apakah Anda mengetik 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]

Untuk menambah kumpulan jawaban:

Gunakan ExtendedDefinePlugin sebagai ganti DefinePlugin

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

ExtendedDefinePlugin jauh lebih mudah digunakan dan didokumentasikan tautan :-)

Karena DefinePlugin tidak memiliki dokumentasi yang baik, saya ingin membantu, dengan mengatakan bahwa itu benar-benar berfungsi seperti #DEFINE di c # .

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

Jadi, jika Anda ingin memahami cara kerja DefinePlugin, baca c # #define doucmentation. tautan

Saya lebih suka menggunakan file .env untuk lingkungan yang berbeda.

1. Gunakan webpack.dev.config untuk menyalin env.devke .env ke folder root
2. Gunakan webpack.prod.config untuk menyalin env.prodke .env

dan dalam kode

menggunakan

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

Saya menemukan solusi berikut ini paling mudah untuk men-setup variabel lingkungan untuk Webpack 2:

Misalnya kami memiliki pengaturan paket web:

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;

Tambahkan Variabel Lingkungan di Webpack:

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

Tentukan Variabel Plugin dan tambahkan ke plugins:

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

Sekarang ketika menjalankan perintah webpack, sampaikan env.NODE_ENVsebagai argumen:

webpack --env.NODE_ENV=development

// OR

webpack --env.NODE_ENV development

Sekarang Anda dapat mengakses NODE_ENVvariabel di mana saja dalam kode Anda.

Sejak Webpack v4, hanya pengaturan modedi konfigurasi Webpack Anda akan mengatur NODE_ENVuntuk Anda (via DefinePlugin). Dokumen di sini.

Berikut adalah cara yang telah bekerja untuk saya dan memungkinkan saya menjaga variabel lingkungan saya KERING dengan menggunakan kembali file 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
}),

Saya bukan penggemar ...

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

... karena tidak menyediakan jenis keamanan apa pun. alih-alih, Anda akhirnya meningkatkan hal-hal rahasia Anda, kecuali jika Anda menambahkan paket web ke gitignore 🤷‍♀️ ada solusi yang lebih baik.

Pada dasarnya dengan konfigurasi ini setelah Anda mengkompilasi kode Anda semua variabel proses env akan dihapus dari seluruh kode, tidak akan ada proses.env.VAR tunggal berkat plugin babel transform-inline-environment-variables PS jika Anda tidak ingin berakhir dengan sejumlah besar undefines, pastikan Anda memanggil env.js sebelum panggilan webpack babel-loader, itu sebabnya itu adalah panggilan webpack hal pertama. array vars dalam file babel.config.js harus cocok dengan objek di env.js. sekarang hanya ada satu hal yang harus dilakukan. tambahkan .envfile, letakkan semua variabel env Anda di sana, file tersebut harus di root proyek atau jangan ragu untuk menambahkannya di mana pun Anda inginkan, pastikan untuk mengatur lokasi yang sama pada file env.js dan juga menambahkannya ke gitignore

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

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

Jika Anda ingin melihat seluruh babel + webpack + ts dapatkan dari heaw https://github.com/EnetoJara/Node-typescript-babel-webpack.git

dan logika yang sama berlaku untuk bereaksi dan yang lainnya 💩

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

file webpack tanpa troll plugin

"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"],
    };
};

Saya tidak tahu mengapa, tetapi tidak ada yang benar-benar menyebutkan solusi paling sederhana. Ini bekerja untuk saya untuk nodejs dan mendengus. Sedangkan bagi banyak orang webpack bisa membingungkan Anda cukup menggunakan baris di bawah ini:

process.env.NODE_ENV = 'production';

Dengan solusi di atas Anda tidak benar-benar perlu menggunakan iri atau webpack. Kadang-kadang solusi hardcode sederhana dapat bekerja untuk beberapa orang.