CC 4.0 ライセンス

このセクションの内容は、以下のリンクの内容から派生したものであり、CC BY 4.0 ライセンスの対象となります。

特に明記されていない限り、以下の内容は元のコンテンツに基づいて修正および削除された結果であると想定できます。

EnvironmentPlugin

EnvironmentPlugin は、DefinePluginprocess.env キーに対して使用するための簡略表記です。

オプション

  • 型: string[] | Record<string, string>

基本的なユースケース

EnvironmentPlugin は、キーの配列、またはキーをデフォルト値にマッピングするオブジェクトのいずれかを受け入れます。

new rspack.EnvironmentPlugin(['NODE_ENV', 'DEBUG']);

これは、以下の DefinePlugin の適用と同等です。

new rspack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  'process.env.DEBUG': JSON.stringify(process.env.DEBUG),
});
ヒント

環境変数を指定しないと、「EnvironmentPlugin - ${key} 環境変数が未定義です」というエラーが発生します。

デフォルト値を使用した使い方

あるいは、EnvironmentPlugin は、キーをデフォルト値にマッピングするオブジェクトをサポートしています。 process.env でキーが未定義の場合、キーのデフォルト値が使用されます。

new rspack.EnvironmentPlugin({
  NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined
  DEBUG: false,
});
警告

process.env から来る変数は常に文字列です。

ヒント

DefinePlugin とは異なり、デフォルト値は EnvironmentPlugin によって JSON.stringify に適用されます。

ヒント

デフォルト値の nullundefined は異なる動作をします。バンドル中に提供する必要がある変数には undefined を使用し、オプションの場合は null を使用します。

警告

バンドル中に環境変数が見つからず、デフォルト値が提供されていない場合、Rspack は警告ではなくエラーをスローします。

テストファイル entry.js で上記の EnvironmentPlugin 設定を実行した結果を見てみましょう。

if (process.env.NODE_ENV === 'production') {
  console.log('Welcome to production');
}
if (process.env.DEBUG) {
  console.log('Debugging output');
}

ターミナルで NODE_ENV=production Rspack を実行してビルドすると、entry.js は次のようになります。

if ('production' === 'production') {
  // <-- 'production' from NODE_ENV is taken
  console.log('Welcome to production');
}
if (false) {
  // <-- default value is taken
  console.log('Debugging output');
}

DEBUG=false Rspack を実行すると、次のようになります。

if ('development' === 'production') {
  // <-- default value is taken
  console.log('Welcome to production');
}
if ('false') {
  // <-- 'false' from DEBUG is taken
  console.log('Debugging output');
}

Git バージョン

次の EnvironmentPlugin 設定は、リポジトリの最後の Git コミットに対応する process.env.GIT_VERSION (例: "v5.4.0-2-g25139f57f") と process.env.GIT_AUTHOR_DATE (例: "2020-11-04T12:25:16+01:00") を提供します。

const child_process = require('child_process');
function git(command) {
  return child_process.execSync(`git ${command}`, { encoding: 'utf8' }).trim();
}

new rspack.EnvironmentPlugin({
  GIT_VERSION: git('describe --always'),
  GIT_AUTHOR_DATE: git('log -1 --format=%aI'),
});

DotenvPlugin

サードパーティの DotenvPlugin (dotenv-webpack) を使用すると、dotenv 変数 (のサブセット) を公開できます。

// .env
DB_HOST=127.0.0.1
DB_PASS=foobar
S3_API=mysecretkey
new Dotenv({
  path: './.env', // Path to .env file (this is the default)
  safe: true, // load .env.example (defaults to "false" which does not use dotenv-safe)
});