close
指南
設定
外掛
API
部落格
關於
貢獻
指南
設定
外掛
API
部落格
關於
貢獻

Preact

如何使用

Rspack 提供了兩種支援 Preact 的解決方案

  • 使用 Rsbuild：Rsbuild 提供了開箱即用的 Preact 支援，讓您可以快速建立 Preact 專案。詳情請參閱Rsbuild - Preact。
  • 手動設定 Rspack：您可以參考目前的文件，手動為 Preact 新增設定。

設定 JSX/TSX

Rspack 利用 SWC 轉換器來處理 JSX/TSX。

新增 builtin:swc-loader 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 外掛以注入執行階段程式碼
  • 新增程式碼轉換的 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 或 swc-loader
      • 啟用 jsc.transform.react.refresh 以支援常見的 react 轉換
      • 在 jsc.experimental.plugins 中新增 @swc/plugin-prefresh，以支援 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。