close
  • 简体中文

      • Preact

      本文介绍如何基于 Rsbuild 构建 Preact 应用。

      创建 Preact 应用

      使用 create-rsbuild 创建基于 Rsbuild 的 Preact 应用：

      npm
      yarn
      pnpm
      bun
      npm create rsbuild@latest

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

      在已有项目中使用 Preact

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

      例如，在 Rsbuild 配置中注册：

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