close
ガイド
設定
プラグイン
API
ブログ
Rspackについて
貢献
ガイド
設定
プラグイン
API
ブログ
Rspackについて
貢献
CC 4.0 ライセンス

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

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

DefinePlugin

DefinePlugin は、コンパイル時にコード内の変数を他の値または式に置き換えます。これは、開発ビルドと本番ビルドで異なる動作をさせる場合に便利です。開発ビルドではロギングを実行し、本番ビルドでは実行しない場合、グローバル定数を使用してロギングを実行するかどうかを決定できます。DefinePlugin は、開発ビルドと本番ビルドのルールを設定し、それを忘れることができるようにします。

new rspack.DefinePlugin({
  // Definitions...
});

オプション

  • タイプ
type CodeValue = RecursiveArrayOrRecord<CodeValuePrimitive>;
type CodeValuePrimitive =
  | null
  | undefined
  | RegExp
  | Function
  | string
  | number
  | boolean
  | bigint
  | undefined;
type RecursiveArrayOrRecord<T> =
  | { [index: string]: RecursiveArrayOrRecord<T> }
  | Array<RecursiveArrayOrRecord<T>>
  | T;

type DefinePluginOptions = Record<string, CodeValue>;

例

基本的なユースケース

DefinePlugin に渡される各キーは、識別子、または `.` で結合された複数の識別子です。

  • 値が文字列の場合、コードフラグメントとして使用されます。
  • 値が文字列でない場合、文字列化されます（関数を含む）。
  • 値がオブジェクトの場合、すべてのキーは同じ方法で定義されます。
  • キーに `typeof` をプレフィックスとして付けると、`typeof` 呼び出しに対してのみ定義されます。

値はコードにインライン化され、minify処理によって冗長な条件が削除されます。

new rspack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify('5fa3b9'),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: '1+1',
  'typeof window': JSON.stringify('object'),
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
});
console.log('Running App version ' + VERSION);
if (!BROWSER_SUPPORTS_HTML5) require('html5shiv');
警告

process の値を定義する場合は、process: { env: { NODE_ENV: JSON.stringify('production') } } よりも 'process.env.NODE_ENV': JSON.stringify('production') を使用することをお勧めします。後者を使用すると、`process` オブジェクトが上書きされ、`process` オブジェクトに他の値が定義されていることを期待する一部のモジュールとの互換性が損なわれる可能性があります。

ヒント

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

if (!PRODUCTION) {
  console.log('Debug info');
}

if (PRODUCTION) {
  console.log('Production log');
}

Rspack をminifyなしで実行すると、次のようになります。

if (!true) {
  console.log('Debug info');
}
if (true) {
  console.log('Production log');
}

minify処理後、次のようになります。

console.log('Production log');

機能フラグ

機能フラグを使用して、本番/開発ビルドの機能を有効/無効にします。

new rspack.DefinePlugin({
  NICE_FEATURE: JSON.stringify(true),
  EXPERIMENTAL_FEATURE: JSON.stringify(false),
});

サービスURL

本番/開発ビルドで異なるサービスURLを使用します

new rspack.DefinePlugin({
  SERVICE_URL: JSON.stringify('https://dev.example.com'),
});