Preact

如何使用

Rspack 提供两种方案来支持 Preact：

  • 使用 Rsbuild：Rsbuild 提供对 React 开箱即用的支持，能够快速创建一个 Preact 项目，详见 Rsbuild - Preact。
  • 手动配置 Rspack：你可以参考当前文档，手动添加 Preact 相关的配置。

配置 JSX/TSX

Rspack 使用 SWC 转译器支持 JSX/TSX。

添加 builtin:swc-loader 以支持 jsx 和 tsx:

rspack.config.js

  1. module.exports = {
  2.   module: {
  3.     rules: [
  4.       {
  5.         test: /\.jsx$/,
  6.         use: {
  7.           loader: 'builtin:swc-loader',
  8.           options: {
  9.             jsc: {
  10.               parser: {
  11.                 syntax: 'ecmascript',
  12.                 jsx: true,
  13.               },
  14.             },
  15.           },
  16.         },
  17.         type: 'javascript/auto',
  18.       },
  19.       {
  20.         test: /\.tsx$/,
  21.         use: {
  22.           loader: 'builtin:swc-loader',
  23.           options: {
  24.             jsc: {
  25.               parser: {
  26.                 syntax: 'typescript',
  27.                 tsx: true,
  28.               },
  29.             },
  30.           },
  31.         },
  32.         type: 'javascript/auto',
  33.       },
  34.     ],
  35.   },
  36. };

关于配置项的更多信息请参考 内置 swc-loader。

完整示例可参考：examples/preact

Preact Refresh

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

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

@rspack/plugin-preact-refresh

首先需要安装相关依赖：

npm

yarn

pnpm

bun

  1. 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 或 swc-loader
      • 开启 jsc.transform.react.refresh 以支持通用的 react 转换
      • 在 jsc.experimental.plugins 中添加 @swc/plugin-prefresh 以支持 preact 特有的转换
    • 使用 babel-loader 并接入 prefresh 官方babel 插件。

WARNING

在 1.0.0 以下版本, Rspack 不支持在 swc-loader 中使用 preact 特有转换。

请使用 builtin:swc-loader 并在配置中添加 rspackExperiments.preact: {} 以开启 preact 特有转换。

rspack.config.js

  1. const PreactRefreshPlugin = require('@rspack/plugin-preact-refresh');
  2. const isDev = process.env.NODE_ENV === 'development';
  4. module.exports = {
  5.   // ...
  6.   mode: isDev ? 'development' : 'production',
  7.   module: {
  8.     rules: [
  9.       {
  10.         test: /\.jsx$/,
  11.         use: {
  12.           loader: 'builtin:swc-loader',
  13.           options: {
  14.             jsc: {
  15.               experimental: {
  16.                 plugins: [
  17.                   [
  18.                     '@swc/plugin-prefresh', // 开启 preact 特有转换
  19.                     {
  20.                       library: ['preact-like-framework'], // 自定义的 preact 库名, 默认值为 `["preact", "preact/compat", "react"]`
  21.                     },
  22.                   ],
  23.                 ],
  24.               },
  25.               parser: {
  26.                 syntax: 'ecmascript',
  27.                 jsx: true,
  28.               },
  29.               transform: {
  30.                 react: {
  31.                   development: isDev,
  32.                   refresh: isDev, // 开启 react 通用转换
  33.                 },
  34.               },
  35.             },
  36.           },
  37.         },
  38.       },
  39.     ],
  40.   },
  41.   plugins: [isDev && new PreactRefreshPlugin()].filter(Boolean),
  42. };

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