Webpack で環境変数を使用するためのさまざまな正しい姿勢

前に書いて

Webpack のさまざまなパッケージ構成についてまだ心配していますか?

今日は、webpack で環境変数を挿入するさまざまな方法についてお話します。あるいは、コマンドラインから環境変数を挿入するだけでは不十分だとお考えですか?

もしあなたがこのような考えを持っているなら、辛抱強く読み進めれば何か違うものが得られると信じています。

結局のところ、成長とは少しずつ積み重ねていくプロセスなのです！ Webpack 5 で環境変数を正しく使用する方法について説明します。

この記事では、Webpack プロセスにおける環境変数を 3 つの側面から説明します。

ビジネスコードに webpack 環境変数を挿入します。
公式のビルドプロセスでは、webpack 環境変数が使用されます。
従来の環境変数方式では、webpack ビルドプロセスの環境変数が使用されます。

ビジネスコードは環境変数を使用する

webpack.DefinePlugin プラグインを使用して、ビジネスコードに環境変数を挿入します。

多くの学生がすでにこのシナリオを適用していると思います。パッケージ化プロセス中に webpack を介していくつかのグローバル変数を挿入し、ビジネスコードでそれらを使用する必要があります。
たとえば、ビジネスエントリファイルには次のようなコードがあります。

// src/main.js
console.log('hello, 環境変数', __WEPBACK__ENV)

私たちが期待しているのは、ビジネスコードが変数 __WEBPACK__ENV に遭遇したときに、コードがこの変数を認識し、正しい文字列値のパッケージを出力することです。

何をすべきか考えてみましょう。

webpack に精通している学生は実際にそれを考えました。webpack の definePlugins プラグインを通じてそれを挿入できます。

定数 wepback = require('webpack')
// webpack.config.js
...
新しい webpack.DefinePlugin({
  __WEBPACK__ENV: JSON.stringify('パッケージ'),
  2: 「1+1」、
});

この構成を webpack プラグインに追加した後、パッケージ化コマンドを実行すると、ビジネスコードに変数 __WEBPACK__ENV が表示される場合、それを文字列 'packages' に置き換えることができるため、環境変数の挿入と同様の効果が得られます。

webpack.DefinePlugin から生まれた思考

おそらく、webpack.definePlugins プラグインの使用法については既にご存知でしょう。心配しないでください。じっくりと見ていきましょう。このコードから、次のようなことが分かります。

'packages' はすでに文字列型ですが、なぜそれを処理するために JSON.stringify() を使用する必要があるのでしょうか?
このときの環境変数は本当にいわゆる環境変数なのでしょうか？

まず、次の 2 つの問題について説明しましょう。

definePlugin いわゆる「環境変数」の実装

公式のWebpackドキュメントにはこう書いてある

(プラグインは直接テキストを置換するため、指定する値には文字列自体の中に実際の引用符を含める必要があることに注意してください。通常、これは '"production"' などの代替引用符を使用するか、JSON.stringify('production') を使用して行われます。)

実際、彼は、webpack.definePlugins は本質的には、先ほど定義した __WEBPACK__ENV:JSON.stringify('packages') のようなパッケージ化プロセスにおける文字列の置換であると言っているだけです。

パッケージ化プロセス中に、コード内で __WEPBACK__ENV が使用されている場合、webpack はその値を対応する definePlugins で定義された値に置き換えます。本質的には、これは一致する文字列の置き換えであり、従来の環境変数プロセスインジェクションではありません。

これは2番目の質問に対する答えでもあります。

JSON.stringify() は環境変数を処理します

次に、最初の質問を見てみましょう。諺にあるように、練習すれば完璧になります。 2 つの異なる definePlugin 構成を比較して結果を確認してみましょう。

// webpack.config.js
新しい webpack.DefinePlugin({
  __WEBPACK__ENV: JSON.stringify('パッケージ'),
  2: 「1+1」、
});

// パッケージ化されたコード ここで、パッケージ化されたコードを一覧表示するために devtools を閉じます console.log('hello, 環境変数', 'packages')

// webpack.config.js
新しい webpack.DefinePlugin({
  __WEBPACK__ENV: 'パッケージ',
  2: 「1+1」、
});

// パッケージ化されたコード ここで、パッケージ化されたコードを一覧表示するために devtools を閉じます console.log('hello, 環境変数', パッケージ)

2 つのコードを注意深く比較すると、最初の質問に対する答えは非常に明確です。definePlugin を使用して key:value グローバル変数を定義すると、テキストが直接値に置き換えられます。したがって、通常は JSON.stringify('pacakges') または "'packages'" を使用します。

DefinePlugin のプロセスと特別な注意が必要な詳細についてはほぼ説明しましたが、この時点では、ビジネスコードで使用するための、いわゆるグローバル変数を定義します。しかし現時点では、パッケージ化およびビルドのプロセスで環境変数を使用する場合は、それらを挿入する別の方法が必要です。

ビルドプロセス中に環境変数を使用する

通常、webpack を使用する場合は、独自のニーズに応じて動的パッケージングに環境変数を使用する必要があります。たとえば、プロジェクト内のフォルダーを動的に読み取り、コンソールでユーザーと動的に対話して、さまざまなバンドルをパッケージ化できます。

このとき、ビルドプロセスで環境変数を使用することが非常に重要です。いわゆるビルドプロセスでの環境変数の使用は、単に webpack.config.js 構成ファイルなどの非ビジネスコードに環境変数を挿入することを意味します。

次のコード行をプロジェクトに入力してみましょう。

npx webpack --env goal=local --env production --progress --config ./webpack.config.js

この時点で、このコード行は、webpack を実行して、パッケージ化のために現在のディレクトリにある webpack.config.js 構成ファイルを読み取り、値がそれぞれ local と true である 2 つの環境変数 goal と progress を挿入することと同等です。

この方法では、構成ファイルで挿入された環境変数を使用できます。

定数パス = require('path');

モジュール.エクスポート = (env) => {
  // ここでは env.<YOUR VARIABLE> を使用します:
  console.log('目標: ', env.goal); // 'local'
  console.log('Production: ', env.production); // true

  戻る {
    エントリ: './src/index.js',
    出力: {
      ファイル名: 'bundle.js',
      パス: path.resolve(__dirname, 'dist'),
    },
  };
};

注意深い人なら、ここでの module.exports が従来のオブジェクトではなく env を含む関数をエクスポートしていることに気付いたかもしれません。

通常、module.exports は構成オブジェクトを指します。 env 変数を使用するには、module.exports を関数に変換する必要があります。
関数を使用しない場合に何が起こるか見てみましょう。

定数パス = require('path');

// ここでは env.<YOUR VARIABLE> を使用します:
console.log('目標: ', process.env.goal); // 未定義
console.log('Production: ', process.env.production); // 未定義

モジュール.エクスポート = {
  エントリ: './src/index.js',
  出力: {
    ファイル名: 'bundle.js',
    パス: path.resolve(__dirname, 'dist'),
  },
};

ノードプロセスで env.goal/production を読み取ると、両方とも未定義であることがわかります。

つまり、通常、コマンドラインで --env を使用して環境変数を webpack ビルドプロセスに挿入する場合は、関数の形式で構成ファイルの module.exports をエクスポートして、関数の最初のパラメーターで対応するキーを取得し、対応する環境変数の値を取得する必要があります。

それで、また質問が来ますね？ノードプロセス内の対応する環境変数を取得したい場合はどうすればよいでしょうか?どうすればいいでしょうか、関数を書きたくないのです。

従来の環境変数方式では、webpack ビルドプロセスの環境変数が使用されます。

どうすればいいですか？実際、webpack パッケージ化の原則は、シェルコマンドを通じて構成ファイル (nodejs 構成ファイル) を実行することです。

webpack コマンドを実行するときに、--env の代わりに実際の従来の環境変数を挿入するとどうなるでしょうか?次は試してみましょう〜

ここでは、非常に便利な環境変数プラグイン cross-env を使用します。これは使い方が非常に簡単で、Linux/Windows などのさまざまな環境で同じ方法でランタイム環境変数を挿入するのに役立ちます... 次に、これを使用してみましょう。

npm install --save-dev cross-env をインストールすることを忘れないでください。

// パッケージ.json
 "ビルド": "cross-env NAME_W=aaa webpack --config ./webpack.config.js"

cross-env NAME_W=aaa 経由で環境変数を挿入しました。

// webpack.config.js
console.log(process.env.NAME_W, 'env'); // 'aaa'

モジュール.エクスポート = {
  エントリ: './src/a.js',
};

試行錯誤の結果、従来のコマンドライン方式で環境変数を挿入することが実際に可能であることがわかりました。この方法では、エクスポートは関数でなければならないという制限を回避し、必要なことを何でも実行できます。

要約する

Webpack の構築とビジネスコードでは、環境変数の挿入が非常に役立ちます。フロントエンドエンジニアリングコードの特定のシステムが必要な場合、環境変数はビルドプロセスとビジネスコードの両方で重要な役割を果たします。

ここで言いたいことはすでに述べたので、簡単にまとめてみましょう。

webpack がビジネスコードをパッケージ化するときに、環境変数と同様にいくつかのグローバル変数を使用する必要がある場合は、webpack.DefinePlugin を使用してビジネスコードで使用するいくつかの変数を定義できます。 (ただし、上記の JSON.stringify() に注意してください)。

同時に、ビルドプロセス中に、webpack によって公式に提供される --env パラメーターと構成ファイル内の module.exports 関数を通じて、--env で定義された環境変数を使用できます。

同時に、ビルドプロセス中に日常的に使用する方法で環境変数を挿入し、コマンドラインで定義された環境変数を直接使用して、process.env.xxx を通じて取得することで、webpack の制限を「回避」することもできます。

Webpack での環境変数の使用に関する記事はこれで終了です。Webpack での環境変数の使用についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: