指南
配置
插件
API
指南
配置
插件
API
简体中文

React 插件

React 插件提供了对 React 功能的支持，插件内部集成了 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 开发。

组件库按需引入

React 组件库的按需引入能力来自 source.transformImport。

当项目中安装了 Ant Design 组件库 <= 4.x 版本时，Rsbuild 会自动添加按需引入能力，默认配置如下：

const defaultAntdConfig = {
  libraryName: 'antd',
  libraryDirectory: isServer ? 'lib' : 'es',
  style: true,
};

当项目中安装了 Arco Design 组件库 时，Rsbuild 会自动添加按需引入能力，默认配置如下：

const defaultArcoConfig = [
  {
    libraryName: '@arco-design/web-react',
    libraryDirectory: isServer ? 'lib' : 'es',
    camelToDashComponentName: false,
    style: true,
  },
  {
    libraryName: '@arco-design/web-react/icon',
    libraryDirectory: isServer ? 'react-icon-cjs' : 'react-icon',
    camelToDashComponentName: false,
  },
];
TIP

当你在 source.transformImport 中添加了 antd 或 @arco-design/web-react 相关的配置时，优先级会高于上述默认配置。

同时，可通过手动设置 transformImport: false 来关掉以上默认行为。