Preact 插件#

Preact 插件提供了对 Preact 的支持，插件内部集成了 JSX 编译、React aliasing 等功能。

快速开始#

安装插件#

你可以通过如下的命令安装插件:

npm add @rsbuild/plugin-preact -D

注册插件#

你可以在 rsbuild.config.ts 文件中注册插件：

import { pluginPreact } from '@rsbuild/plugin-preact';

export default {
  plugins: [pluginPreact()],
};

注册插件后，你可以直接进行 Preact 开发。

选项#

reactAliasesEnabled#

是否将 react、react-dom 通过 alias 指向 preact/compat。

• 类型： boolean
• 默认值： true
• 示例： 禁用别名。

pluginPreact({
  reactAliasesEnabled: false,
});

prefreshEnabled#

是否注入 Prefresh 用于 HMR。

• 类型： boolean
• 默认值： true
• 版本： >= v1.1.0
• 示例： 禁用 Prefresh。

pluginPreact({
  prefreshEnabled: false,
});

include#

指定要由 @rspack/plugin-preact-refresh 插件处理的文件。这个值与 Rspack 中的 rule.test 选项相同。

• 类型： RuleSetCondition
• 默认值： /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/
• 版本： >= v1.1.0

pluginPreact({
  include: [/\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/, /some-other-module/],
});

exclude#

排除 @rspack/plugin-preact-refresh 插件处理的文件。这个值与 Rspack 中的 rule.exclude 选项相同。

• 类型： RuleSetCondition
• 默认值： /[\\/]node_modules[\\/]/
• 版本： >= v1.1.0

pluginPreact({
  exclude: [/[\\/]node_modules[\\/]/, /some-other-module/],
});