close
指南
配置
插件
API
博客
关于
贡献
指南
配置
插件
API
博客
关于
贡献

Preact

如何使用

Rspack 提供两种支持 Preact 的解决方案

  • 使用 Rsbuild: Rsbuild 为 Preact 提供开箱即用的支持，使您可以快速创建 Preact 项目。有关详细信息，请参见 Rsbuild - Preact。
  • 手动配置 Rspack: 您可以参考当前文档来手动添加 Preact 的配置。

配置 JSX/TSX

Rspack 利用 SWC 转换器来处理 JSX/TSX。

添加 builtin:swc-loader 加载器来支持 jsx 和 tsx

rspack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'ecmascript',
                jsx: true,
              },
            },
          },
        },
        type: 'javascript/auto',
      },
      {
        test: /\.tsx$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true,
              },
            },
          },
        },
        type: 'javascript/auto',
      },
    ],
  },
};

有关详细配置，请参考 内置 swc-loader。

有关完整示例，请参考 examples/preact。

Preact Refresh

要启用 Preact Refresh，需要执行以下步骤

  • 添加 @rspack/plugin-preact-refresh 插件以注入运行时代码
  • 添加加载器进行代码转换

@rspack/plugin-preact-refresh

首先，您需要安装依赖项

npm
yarn
pnpm
bun
npm add @rspack/plugin-preact-refresh @prefresh/core @prefresh/utils -D

启用 Preact Refresh 分为两个部分：代码注入和代码转换

  • 代码注入：注入与 @prefresh/core 和 @prefresh/utils 交互的代码，已集成在 @rspack/plugin-preact-refresh 插件中
  • 代码转换需要加载器
    • 使用 builtin:swc-loader 或 swc-loader
      • 启用 jsc.transform.react.refresh 以支持常见的 react 转换
      • 将 @swc/plugin-prefresh 添加到 jsc.experimental.plugins 以支持 preact 的特定转换
    • 使用 babel-loader 并添加 prefresh 的官方 babel 插件。
警告

在 1.0.0 之前的版本中，Rspack 不支持使用 swc-loader 的 preact refresh。

请使用 builtin:swc-loader 并使用 rspackExperiments.preact: {} 启用 preact 特定转换

rspack.config.js
const PreactRefreshPlugin = require('@rspack/plugin-preact-refresh');
const isDev = process.env.NODE_ENV === 'development';

module.exports = {
  // ...
  mode: isDev ? 'development' : 'production',
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              experimental: {
                plugins: [
                  [
                    '@swc/plugin-prefresh', // enable prefresh specific transformation
                    {
                      library: ['preact-like-framework'], // the customizable preact name, default is `["preact", "preact/compat", "react"]`
                    },
                  ],
                ],
              },
              parser: {
                syntax: 'ecmascript',
                jsx: true,
              },
              transform: {
                react: {
                  development: isDev,
                  refresh: isDev, // enable common react transformation
                },
              },
            },
          },
        },
      },
    ],
  },
  plugins: [isDev && new PreactRefreshPlugin()].filter(Boolean),
};

有关完整示例，请参考 examples/preact-refresh。