Preact#

在这篇文档中，你可以了解到如何基于 Rsbuild 来构建一个 Preact 应用。

创建 Preact 项目#

你可以使用 create-rsbuild 来创建一个 Rsbuild + Preact 的项目，调用以下命令：

npm create rsbuild@latest

然后在 Select framework 时选择 Preact 即可。

在已有项目中使用 Preact#

为了能够编译 Preact，你需要注册 Rsbuild 的 Preact 插件，插件会自动添加 Preact 构建所需的配置。

例如，在 rsbuild.config.ts 中注册：

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

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

Preact Fast Refresh#

Preact 插件使用 @preact/prefresh 和 @rspack/plugin-preact-refresh 来热替换 Preact 组件。

识别#

Prefresh 需要能够识别你的组件，这意味着组件名称应该以大写字母开头，hook 名称应该以 use 开头，后跟一个大写字母。这使得插件能够有效地识别这些内容。

注意，如下所示的组件是没有命名的：

export default () => {
  return <p>Want to refresh</p>;
};

相反，应该这样写：

const MyComponent = () => {
  return <p>Want to refresh</p>;
};

export default MyComponent;

当使用高阶组件（HOC）时，请确保设置 displayName 以便插件能够将其识别为组件。