#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 以便插件能够将其识别为组件。