close
ガイド
設定
プラグイン
API
ブログ
概要
貢献
ガイド
設定
プラグイン
API
ブログ
概要
貢献

Preact

使い方

Rspack は Preact をサポートするために 2 つのソリューションを提供します。

  • Rsbuild を使用する: Rsbuild は Preact をすぐに使える状態でサポートしており、Preact プロジェクトを迅速に作成できます。詳細については、Rsbuild - Preactを参照してください。
  • Rspack を手動で設定する: Preact の設定を手動で追加するには、現在のドキュメントを参照してください。

JSX/TSX の設定

Rspack は JSX/TSX に SWC トランスフォーマーを活用します。

jsx と tsx をサポートするために builtin:swc-loader ローダーを追加します。

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 リフレッシュ

Preact リフレッシュを有効にするには、次の手順が必要です。

  • ランタイムコードを注入するために @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 の有効化は、コードの注入とコードの変換の 2 つの部分に分かれています。

  • コード注入: @prefresh/core および @prefresh/utils と対話するコードを注入します。これは、@rspack/plugin-preact-refresh プラグインに統合されています。
  • コード変換にはローダーが必要です。
    • builtin:swc-loader または swc-loader を使用します。
      • 一般的な react 変換をサポートするために jsc.transform.react.refresh を有効にします。
      • preact の特定の変換をサポートするために @swc/plugin-prefresh を jsc.experimental.plugins に追加します。
    • babel-loader を使用し、prefresh の公式 babel プラグインを追加します。
警告

1.0.0 未満のバージョンでは、Rspack は swc-loader を使用した preact リフレッシュをサポートしていませんでした。

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を参照してください。