close
指南
配置
插件
API
博客
关于
贡献
指南
配置
插件
API
博客
关于
贡献
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 调用定义。

这些值将内联到代码中，允许最小化过程删除冗余条件。

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