web-dev-qa-db-ja.com

Webpackで環境依存変数を渡す

角度のあるアプリをgulpからwebpackに変換しようとしています。 gulpでは、NODE_ENVに応じて、gulp-preprocessを使用して、HTMLページの一部の変数(データベース名など)を置き換えます。 webpackで同様の結果を得るための最良の方法は何ですか?

272
kpg

これを達成するための2つの基本的な方法があります。

DefinePlugin

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

これは単に「そのまま」一致を置き換えることに注意してください。そのため、文字列はその形式になっています。あなたはそこにあるオブジェクトのようなもっと複雑な構造を持つことができますが、あなたはアイデアを得ます。

環境プラグイン

new webpack.EnvironmentPlugin(['NODE_ENV'])

EnvironmentPluginは内部的にDefinePluginを使用し、それを通して環境値をコードにマップします。より簡潔な構文.

エイリアス

あるいは、 エイリアスモジュール を介して設定を消費することもできます。消費者側からは、このようになります。

var config = require('config');

設定自体は次のようになります。

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

process.env.NODE_ENVdevelopmentだとしましょう。それはそれから./config/development.jsにマップするでしょう。それがマッピングされているモジュールは、次のように設定をエクスポートできます。

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

もしあなたがcliインターフェースだけを使いたいのであれば、もう一つの選択肢として、webpackのdefineオプションを使ってください。 package.jsonに次のスクリプトを追加します。

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

だから私はnpm run build-productionを実行するだけです。

104
zer0chain

環境固有の変数を設定する方法についていくつかの選択肢を調べたところ、次のようになりました。

私は現在2つの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')
  }
}),

私のコードでは、私はこの(簡潔な)方法でAPI_URLの値を取得します。

const apiUrl = process.env.API_URL;

2016年11月3日編集

Webpackのドキュメントに例があります。 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")
})

ESLint を指定した場合、no-undefルールがオンになっている場合は、コード内で未定義の変数を明確に許可する必要があります。 http://eslint.org/docs/rules/no-undef このように:

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

2017年9月7日編集(Create-React-App固有)

あまり設定したくない場合は、Create-React-Appを参照してください。 Create-React-App - カスタム環境変数の追加 。フードの下でCRAはとにかくWebpackを使います。

64
thevangelist

追加のプラグインなしで any コマンドライン引数 を渡すことができます webpack 2以降の--envを使用して:

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

Webpack.config.jsの変数を使用します。

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

出典

22
andruso

EnvironmentPluginで利用可能な webpack を直接使用して、変換中にあらゆる環境変数にアクセスできます。

webpack.config.jsファイルでプラグインを宣言するだけです。

var webpack = require('webpack');

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

使用したい環境変数の名前を明示的に宣言する必要があります。

22
Kuhess

ヴァンゲリストによる 上記の投稿に対する私の編集 は承認されませんでした 、追加情報の投稿。

package.json から定義済みのバージョン番号のように値を選び、それをJavascript内の DefinePlugin からアクセスする場合。

{"version": "0.0.1"}

次に、 package.json をそれぞれの webpack.config の中にインポートし、インポート変数を使用して属性にアクセスし、次に DefinePlugin の中の属性を使用します。

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

例えば、 webpack.config の特定の設定はDefinePluginにMETADATAを使用しています。

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

TypeScriptファイル内でこれにアクセスします。

this.versionNumber = process.env.VERSION;

最も賢い方法は次のようになります。

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

Ross Allenに感謝します

13
Abhijeet

個人的にたくさんの答えを追加するために、私は以下を好む:

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

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

これを使用してもファンキーなenv変数やクロスプラットフォームの問題(env varsを使用)はありません。あなたがしなければならないのは、それぞれdevまたはproductionに対して通常のwebpackまたはwebpack -pを実行することです。

参照: Githubの問題

12
Goblinlord

@ zer0chainの答えに似た、もう1つの答えです。ただし、区別が1つあります。

webpack -pを設定すれば十分です。

それはと同じです:

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

そしてこれはと同じです

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

module.exports = {
  //...

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

それで、あなたはpackage.jsonノードファイルでこのような何かだけを必要とするかもしれません:

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

DefinePlugin からほんの少しのヒント。

DefinePluginを使用すると、コンパイル時に構成できるグローバル定数を作成できます。これは開発ビルドとリリースビルドの間で異なる振る舞いを許容するのに役立ちます。たとえば、ロギングが行われるかどうかを判断するためにグローバル定数を使用することができます。おそらくあなたはあなたの開発ビルドではあるがリリースビルドではログインしていない。これがDefinePluginが容易にするシナリオの一種です。


これがそうであるのであなたが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]
11
prosti

答えの束に追加するには:

DefinePluginの代わりにExtendedDefinePluginを使用する

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

ExtendedDefinePluginはずっと使いやすく、文書化されています:-) link

DefinePlugin 欠けているよいドキュメントなので、実際には#define in c#のように動作すると言って手助けをしたいと思います。

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

したがって、DefinePluginがどのように機能するのかを理解したい場合は、c##defineドキュメントを読んでください。 リンク

3

私は、Webpack 2の環境変数を設定するのに最も簡単な次の解決策を見つけました。

たとえば、webpackの設定があります。

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;

Webpackに環境変数を追加します。

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

プラグイン変数を定義し、それをpluginsに追加します。

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

Webpackコマンドを実行するとき、引数としてenv.NODE_ENVを渡します。

webpack --env.NODE_ENV=development

// OR

webpack --env.NODE_ENV development

これで、コード内のどこからでもNODE_ENV変数にアクセスできます。

2
ruddra

Webpack v4以降、Webpackの設定でmodeを設定するだけで(DefinePluginを介して)自動的にNODE_ENVが設定されます。 ドキュメントはこちら。

1
ericsoco

私は別の環境のために.envファイルを使用することを好みます。

  1. Webpack.dev.configを使用して、env.devを.envにコピーしてルートフォルダに入れます。
  2. Webpack.prod.configを使用して、env.prodを.envにコピーします。

そしてコードで

つかいます

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

1
Siva Kandaraj

これが私のために働いていて、私がjsonファイルを再利用することによって私の環境変数DRYを保つことを可能にした方法です。

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

私は大ファンではありません...

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

...いかなる種類のセキュリティも提供しないため。代わりに、gitignoreにWebパックを追加しない限り、秘密のものを増やすことになりますか???? ‍♀️より良い解決策があります。

基本的にこの設定では、コードをコンパイルすると、すべてのプロセスenv変数がコード全体から削除され、単一のprocess.env.VARはbabelプラグインtransform-inline-environment-variables PSのおかげでなくなりますたくさんの未定義になりたくないので、webpackがbabel-loaderを呼び出す前にenv.jsを呼び出してください。それがwebpackが最初に呼び出す理由です。 babel.config.jsファイルの変数の配列は、env.jsのオブジェクトと一致する必要があります。今やるべきことは1つだけです。 .envファイルを追加し、すべてのenv変数をそこに配置します。ファイルはプロジェクトのルートにあるか、必要に応じて自由に追加する必要があります。env.jsファイルに同じ場所を設定してください。また、gitignoreに追加します

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

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

Babel + webpack + ts全体を表示するには、heaw https://github.com/EnetoJara/Node-TypeScript-babel-webpack.gitから取得します

そして、同じ論理が反応と他のすべてに適用されますか????

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ファイル

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