close
指南
配置
插件
API
博客
关于
贡献
指南
配置
插件
API
博客
关于
贡献

React

如何使用

Rspack 提供两种方案支持 React

  • 使用 Rsbuild: Rsbuild 提供开箱即用的 React 支持，可以快速创建 React 项目。查看 Rsbuild - React 获取更多信息。
  • 手动配置 Rspack: 可以参考当前文档手动添加 React 配置。

配置 JSX/TSX

Rspack 利用 SWC 转换器处理 JSX/TSX。

添加 builtin:swc-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 插件统一处理，而代码转换由加载器处理。这意味着此插件可以与 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。