close
指南
配置
外掛
API
部落格
關於
貢獻
指南
配置
外掛
API
部落格
關於
貢獻

React

如何使用

Rspack 提供兩種解決方案來支援 React

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

設定 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。

快速重新整理

目前有兩種方法可以在 Rspack 中啟用 React 快速重新整理

首先，您需要安裝 @rspack/plugin-react-refresh 以支援 React 快速重新整理。

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

啟用 React 快速重新整理 功能主要涉及兩個方面：程式碼注入和程式碼轉換。

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 快速重新整理程式碼注入邏輯與轉換邏輯分離。程式碼注入邏輯由 @rspack/plugin-react-refresh 外掛統一處理，而程式碼轉換則由 loader 處理。這表示此外掛可以與 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 是一個通用工具，用於將可縮放向量圖形 (SVG) 檔案轉換為 React 元件。

SVGR 與 Rspack 的用法與 Webpack 完全相同。

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

有關 SVGR 的詳細用法，請參閱 SVGR 文件 - webpack。