React 插件

React 插件提供了对 React 的支持,插件内部集成了 JSX 编译、React Refresh 等功能。

快速开始

安装插件

你可以通过如下的命令安装插件:

npm
yarn
pnpm
bun
npm add @rsbuild/plugin-react -D

注册插件

你可以在 rsbuild.config.ts 文件中注册插件:

rsbuild.config.ts
import { pluginReact } from '@rsbuild/plugin-react';

export default {
  plugins: [pluginReact()],
};

注册完插件后,你可以直接进行 React 开发。

选项

swcReactOptions

用于配置 SWC 转换 React 代码的行为,等价于 SWC 的 jsc.transform.react 选项。

  • 类型:
interface SwcReactOptions {
  pragma?: string;
  pragmaFrag?: string;
  throwIfNamespace?: boolean;
  development?: boolean;
  useBuiltins?: boolean;
  refresh?: boolean;
  runtime?: 'automatic' | 'classic';
  importSource?: string;
}
  • 默认值:
const isDev = process.env.NODE_ENV === 'development';
const defaultOptions = {
  development: isDev,
  refresh: isDev,
  runtime: 'automatic',
};

swcReactOptions.runtime

设置 JSX runtime 的类型。

  • 类型: 'automatic' | 'classic'
  • 默认值: 'automatic'

默认情况下,Rsbuild 使用 React 17 引入的新版本 JSX runtime,即 runtime: 'automatic'

如果你当前的 React 版本低于 16.14.0,可以将 runtime 设置为 'classic'

pluginReact({
  swcReactOptions: {
    runtime: 'classic',
  },
});

React 16.14.0 可以使用新版本 JSX runtime。

在使用 classic JSX runtime 时,你需要手动在代码中引入 React:

import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}

swcReactOptions.importSource

runtime'automatic' 时,你可以通过 importSource 来指定 JSX runtime 的引入路径。

  • 类型: string
  • 默认值: 'react'

比如,在使用 Emotion 时,你可以将 importSource 设置为 '@emotion/react'

pluginReact({
  swcReactOptions: {
    importSource: '@emotion/react',
  },
});

splitChunks

chunkSplit.strategy 设置为 split-by-experience 时,Rsbuild 默认会自动将 reactrouter 相关的包拆分为单独的 chunk:

  • lib-react.js:包含 react,react-dom,以及 react 的子依赖(scheduler)。
  • lib-router.js:包含 react-router,react-router-dom,以及 react-router 的子依赖(history,@remix-run/router)。

该选项用于控制这一行为,决定是否需要将 reactrouter 相关的包拆分为单独的 chunk。

  • 类型:
type SplitReactChunkOptions = {
  react?: boolean;
  router?: boolean;
};
  • 默认值:
const defaultOptions = {
  react: true,
  router: true,
};
  • 示例:
pluginReact({
  splitChunks: {
    react: false,
    router: false,
  },
});