指南
配置
插件
API
博客
关于
贡献
指南
配置
插件
API
博客
关于
贡献
简体中文

Preact

如何使用

你可以参考当前文档，手动添加 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

Added in v0.7.3

需要开启 Preact Refresh 需要如下步骤：

  • 添加 @rspack/plugin-preact-refresh 插件
  • 添加代码转换相关 loader

@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 插件中，可通过该插件实现
  • 代码转换需要通过 loader 来完成：
    • 使用 builtin:swc-loader
      • 开启 jsc.transform.react.refresh 以支持通用的 react 转换
      • 开启 rspackExperiments.preact 以支持 preact 特有的转换
    • 使用 babel-loader 并接入 prefresh 官方babel 插件。
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: {
            rspackExperiments: {
              preact: {}, // 开启 preact 特有转换
            },
            jsc: {
              parser: {
                syntax: 'ecmascript',
                jsx: true,
              },
              transform: {
                react: {
                  development: isDev,
                  refresh: isDev, // 开启 react 通用转换
                },
              },
            },
          },
        },
      },
    ],
  },
  plugins: [isDev && new PreactRefreshPlugin()].filter(Boolean),
};

完整示例可参考：examples/preact-refresh