CC 4.0 授權

本節內容衍生自以下連結的內容，並受 CC BY 4.0 授權條款約束。
https://webpack.dev.org.tw/plugins/define-plugin/
除非另有明確說明，否則以下內容可以假設為基於原始內容進行修改和刪除的結果。

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 呼叫進行定義。

這些值將內聯到程式碼中，允許最小化處理來移除多餘的條件式。

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 且未進行最小化處理後，結果如下

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

然後在最小化處理後，結果如下

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'),
});

本頁內容

DefinePlugin#

選項#

範例#

基本使用案例#

功能標誌#

服務 URL#

DefinePlugin

選項

範例

基本使用案例

功能標誌

服務 URL