close
ガイド
設定
プラグイン
API
ブログ
概要
コントリビュート
ガイド
設定
プラグイン
API
ブログ
概要
コントリビュート

React

使用方法

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

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

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

高速リフレッシュ

現在、Rspack で React Fast Refresh を有効にする方法は 2 つあります。

最初に、React Fast Refresh をサポートするために @rspack/plugin-react-refresh をインストールする必要があります。

npm
yarn
pnpm
bun
npm add @rspack/plugin-react-refresh react-refresh -D

React Fast Refresh 機能の有効化は、主にコードインジェクションとコード変換の 2 つの側面から成ります。

  • コードインジェクションは、react-refresh パッケージからのいくつかのコードと、いくつかのカスタムランタイムコードを注入します。これらはすべて @rspack/plugin-react-refresh プラグインに統合されており、このプラグインを通じて注入できます。
  • コード変換は、builtin:swc-loader の場合は jsc.transform.react.refresh、babel-loader の場合は react-refresh/babel などのローダーを通じて追加できます。
rspack.config.js
const ReactRefreshPlugin = require('@rspack/plugin-react-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: {
              parser: {
                syntax: 'ecmascript',
                jsx: true,
              },
              transform: {
                react: {
                  development: isDev,
                  refresh: isDev,
                },
              },
            },
          },
        },
      },
    ],
  },
  plugins: [isDev && new ReactRefreshPlugin()].filter(Boolean),
};

以前のアプローチと比較して、この方法は React Fast Refresh のコードインジェクションロジックと変換ロジックを分離します。コードインジェクションロジックは @rspack/plugin-react-refresh プラグインによって統一的に処理され、コード変換はローダーによって処理されます。つまり、このプラグインは builtin:swc-loader、swc-loader、または babel-loader と組み合わせて使用できます。

  • builtin:swc-loader との使用方法については、examples/react-refresh の例を参照してください。swc-loader と使用する場合は、builtin:swc-loader を swc-loader に置き換えるだけです。
  • babel-loader との使用方法については、examples/react-refresh-babel-loader の例を参照してください。

React コンパイラ

React コンパイラは、React 19 で導入された実験的なコンパイラで、React コードを自動的に最適化できます。

React コンパイラを使用する前に、React コンパイラ ドキュメント を読んで、React コンパイラの機能、現在の状態、使用方法を理解することをお勧めします。

ヒント

現在、React コンパイラは Babel コンパイルのみをサポートしており、ビルド時間が遅くなる可能性があります。

使用方法

Rspack で React コンパイラを使用する手順

  1. react と react-dom のバージョンを 19 にアップグレードします。
  2. React コンパイラは現在、Babel プラグインのみを提供しているため、以下をインストールする必要があります。
  1. Rspack 設定ファイルに babel-loader を登録します。
rspack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'builtin:swc-loader',
            options: {
              // SWC options for JS
            },
          },
        ],
      },
      {
        test: /\.jsx$/,
        use: [
          {
            loader: 'builtin:swc-loader',
            options: {
              // SWC options for JSX
            },
          },
          { loader: 'babel-loader' },
        ],
      },
    ],
  },
};
  1. babel.config.js を作成し、プラグインを設定します。
babel.config.js
// babel.config.js
const ReactCompilerConfig = {
  /* ... */
};

module.exports = function () {
  return {
    plugins: [
      ['babel-plugin-react-compiler', ReactCompilerConfig], // must run first!
      '@babel/plugin-syntax-jsx',
    ],
  };
};

例

以下の例プロジェクトを参照できます。

SVGR の統合

SVGR は、Scalable Vector Graphics (SVG) ファイルを React コンポーネントに変換するための汎用ツールです。

Rspack での SVGR の使い方は、Webpack とまったく同じです。

rspack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
};

SVGR の詳細な使用方法については、SVGR ドキュメント - webpack を参照してください。