---
title: "@farmfe/plugin-react-components"
locale: "zh"
version: "1.x"
canonicalUrl: "https://farmfe.org/zh/docs/1.x/plugins/official-plugins/react-components"
publicationStatus: "prerelease"
---

<a id="farmfeplugin-react-components"></a>
# @farmfe/plugin-react-components


按需自动导入React组件。


<a id="安装"></a>
## 安装


**npm**

```javascript
npm install @farmfe/plugin-react-components
```


**yarn**

```javascript
yarn add @farmfe/plugin-react-components
```


**pnpm**

```javascript
pnpm add @farmfe/plugin-react-components
```



<a id="使用"></a>
## 使用


` @farmfe/plugin-react-components ` 是一个Rust插件，你只需要在 ` farm.config.ts ` 的 ` plugins ` 字段中配置其包名即可。


```ts
import { UserConfig } from '@farmfe/core';

const config: UserConfig = {
  plugins: ['@farmfe/plugin-react-components', { /** 选项在此 */}]
}
```


<a id="功能"></a>
## 功能


- 💚 支持React开箱即用。
- ✨ 支持组件和指令。
- 🏝 树摇（Tree-shaking），只注册你使用的组件。
- 🪐 文件夹名称作为命名空间。
- 🦾 完整的TypeScript支持。
- 🌈 为流行的UI库提供[内置解析器](</zh/docs/1.x/plugins/official-plugins/react-components#%E4%BB%8EUI%E5%BA%93%E4%B8%AD%E5%AF%BC%E5%85%A5>)。


<a id="使用-1"></a>
## 使用


像往常一样在模板中使用组件，它将按需导入组件，不再需要` import `和` component registration `！如果你异步注册父组件（或懒加载路由），自动导入的组件会与其父组件一起进行代码拆分。


它会自动将这个


```tsx
export function Main() {
  return <HelloWorld msg="Hello React + Farm" />
}
```


转换成这个


```tsx
import HelloWorld from './src/components/HelloWorld'

export function Main() {
  return <HelloWorld msg="Hello React + Farm" />
}
```


> **注意**
> 默认情况下，此插件会导入` src/components `路径中的组件。你可以使用` dirs `选项进行自定义。


<a id="typescript"></a>
## TypeScript


为自动导入的组件获得TypeScript支持。


```ts
Components({
  dts: true, // 如果安装了`typescript`默认启用
})
```


完成设置后，将自动生成一个` components.d.ts `文件，并自动更新类型定义。你可以选择是否将其提交到git。


> **确保你也将` components.d.ts `添加到` tsconfig.json `的` include `中。**


<a id="从UI库中导入"></a>
## 从UI库中导入


我们为几个流行的UI库（如**Ant Design**、**Arco Design**和**Material UI**）提供了几个内置解析器，你可以通过以下方式启用它们：


支持的解析器：


- [Ant Design](<https://ant.design/>)
- [Arco Design](<https://arco.design/react/docs/start>)
- [Material UI](<https://mui.com/>)


```ts
// farm.config.js

import { UserConfig } from '@farmfe/core';

const config: UserConfig = {
  plugins: ['@farmfe/plugin-react-components', {
        local: true,
        resolvers:[
          {
            module: "antd",
            prefix: "Ant"
          },
          {
            module:"@arco-design/web-react",
            prefix: "Arco",
            import_style: true // style/index.js
          }
        ]
  }]
}
```


<a id="配置"></a>
## 配置


以下显示了配置的默认值
~~component~~


```ts
{
  // 相对路径到搜索组件的目录。
  dirs: ['src/components'],
  
  // 自定义组件的解析器。
  resolvers: [],

  /**
   * 组件以绝对或相对路径引入。
   *
   * @default 绝对
   */
  import_mode: "Absolute"

  /**
   * 是否对本地组件有效
   *
   * @default true
   */
  local: true,

  /**
   * 导入样式`style/index.js`，也接受路径用于自定义路径(<Component>/**)与组件
   *
   * @default false
   */
  importStyle?: boolean | string 

  // 生成全局声明的`components.d.ts`，
  // 也接受自定义文件名的路径
  // 默认：如果安装了typescript包则为`true`
  dts: true,

  // 转换目标（要插入自动导入的组件）的过滤器
  // 注意，这不是关于包含/排除注册组件 - 使用`Regex`来做那个
  include: ["src/components"],
  exclude: ["node_modules"],
}
```