@farmfe/plugin-react-components

按需自动导入React组件。

安装

javascript

npm install @farmfe/plugin-react-components

javascript

yarn add @farmfe/plugin-react-components

javascript

pnpm add @farmfe/plugin-react-components

使用

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

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

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

功能

💚 支持React开箱即用。
✨ 支持组件和指令。
🏝 树摇（Tree-shaking），只注册你使用的组件。
🪐 文件夹名称作为命名空间。
🦾 完整的TypeScript支持。
🌈 为流行的UI库提供内置解析器。

使用

像往常一样在模板中使用组件，它将按需导入组件，不再需要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选项进行自定义。

TypeScript

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

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

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

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

从UI库中导入

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

支持的解析器：

// 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
          }
        ]
  }]
}

配置

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

{
  // 相对路径到搜索组件的目录。
  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"],
}