close
  • 简体中文

      • React

      如何使用

      Rspack 提供两种方案来支持 React：

      • 使用 Rsbuild：Rsbuild 提供对 React 开箱即用的支持，能够快速创建一个 React 项目，详见 Rsbuild - React。
      • 手动配置 Rspack：你可以参考当前文档，手动添加 React 相关的配置。

      配置 JSX/TSX

      Rspack 使用 SWC 转译器支持 JSX 和 TSX。

      你可以添加 builtin:swc-loader 以支持 .jsx 和 .tsx 文件：

      rspack.config.mjs
      export default {
  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',
      },
    ],
  },
};

      关于配置项的更多信息请参考 builtin:swc-loader。

      Fast Refresh

      通过 @rspack/plugin-react-refresh 支持 React Fast Refresh 功能，首先需要安装相关依赖：

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

      React Fast Refresh 功能的开启主要分为两部分：代码注入和代码转换：

      rspack.config.mjs
      import { rspack } from '@rspack/core';
import ReactRefreshPlugin from '@rspack/plugin-react-refresh';

const isDev = process.env.NODE_ENV === 'development';

export default {
  // ...
  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(),
    isDev && new rspack.HotModuleReplacementPlugin(),
  ],
};

      这种实现方式将代码注入逻辑和转换逻辑解耦，代码注入逻辑统一通过 @rspack/plugin-react-refresh 插件完成，代码转换通过 loader 完成。这意味着该插件可以配合 builtin:swc-loader、swc-loader 或 babel-loader 使用：

      React Compiler

      React Compiler 是 React 19 引入的一个实验性编译器，它可以自动优化你的 React 代码。

      在开始使用 React Compiler 之前，建议阅读 React Compiler 文档，以了解 React Compiler 的功能、当前状态和使用方法。

      Tip

      React Compiler 目前仅支持 Babel 编译，这会导致构建时间变慢。

      如何使用

      在 Rspack 中使用 React Compiler 的步骤如下：

      1. 升级 react 和 react-dom 版本到 19。如果你暂时无法升级，可以在 React 17 或 18 项目中安装 react-compiler-runtime，以允许编译后的代码在 19 之前的版本上运行。
      2. 目前 React Compiler 仅提供了 Babel 插件，你需要安装：
      1. 在你的 Rspack 配置中注册 babel-loader：
      rspack.config.mjs
      export default {
  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
      const ReactCompilerConfig = {
  /* ... */
};

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

      对于 React 17 和 18 的项目，除了安装 react-compiler-runtime，还需要指定 target：

      babel.config.js
      const ReactCompilerConfig = {
  target: '18', // '17' | '18' | '19'
};

      示例

      你可以参考以下示例项目：

      集成 SVGR

      SVGR 是一个用于将 SVG 转换为 React 组件的工具，

      在 Rspack 中使用 SVGR 的方式与 webpack 中完全一致：

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

      对于 SVGR 的详细用法，请参考 SVGR 文档 - webpack。