definePlugin変数とenv変数の違いは何ですか？

Question

試してみたところ、webpack.definePluginの効果と、npmスクリプトのフォームに渡された環境変数が同じであることがわかりました。 なぜdefinePluginが必要ですか？

Answer 1

まあ、場合によっては、コードでenv変数を広範囲に使用すると冗長または危険になることがあります。

例1：DefinePluginで

NODE_ENV=production webpack ...

多くのロジックを追加し、あなたは次に、コードであなたが何度も何度もprocess.env === 'production'を書くのではなく、__PRODUCTION__を使用することができます

__PRODUCTION__: process.env === 'production'

を定義することができますコード。

例2：次に、あなたのprocess.env以外の__ENV__を使用すると、少ない驚きを与えるだろうフォールバック

__ENV__: process.env || 'development'

を提供します。

また、env変数に制限されない他のものを定義することもできます。

Answer 2

グローバルなes6変数をenv varなしで設定したい場合があるので、環境変数と同じ名前で異なる目的を持つグローバルがある場合。

Answer 3

典型的なケース：

あなたが直接process.env.NODE_ENVで、クライアント側のコードを使用することはできません。

nodejsコードですので、

しかし、多くはクライアント側コード、特にthird-partyライブラリです。

developmentのコードは、warning、logなどのようになります。

のような：

if(process.env.NODE_ENV === 'development') { makeWarinig(); } 

しかし、生産で、あなたはbundle.jsでこれらのコードにしたくありません。したがって、libraryからNODE_ENV=productionまでを伝えることができます。

webpack.DefinePluginは、process.env.NODE_ENVの代わりに、webpack.config.jsで定義されます。以下のような

：nodejs cliはwebpack.config.jsに環境変数を渡し、webpackDefinePluginを通じてクライアント側のコードに変数を渡します。

Answer 4

通常、私たちのプロジェクトでは、新しいwebpack.DefinePluginを使用して、クライアント側でグローバルに使用できるグローバル値を定義しています。

if (process.env.NODE_ENV === 'production') { 
    config.plugins.push(
     new webpack.DefinePlugin({ 
     'process.env': { 
     'NODE_ENV': JSON.stringify(process.env.NODE_ENV) 
     } 
     }), 
     new webpack.optimize.UglifyJsPlugin() 
    ) 
} 

2つのprocess.env.NODE_ENVは同じに見えますが実際は異なります。 最初のものはpackage.jsonで定義されています。それは次のようになります：

"scripts": { 
    "build": "NODE_ENV='production' webpack -p" 
}, 

ノードサーバー側では、NODE_ENV = 'production'と定義されています。 Webpackではアクセスできますが、クライアント側ではアクセスできません。したがって、webpack.config.jsでは、私たちのクライアント側で使用できるように再定義する必要があります。