@farmfe/plugin-auto-import

按需自动导入第三方库的方法

安装

npm

npm install @farmfe/plugin-auto-import

yarn

yarn add @farmfe/plugin-auto-import

pnpm

pnpm add @farmfe/plugin-auto-import

bun

bun add @farmfe/plugin-auto-import

使用

@farmfe/plugin-auto-import 是一个Rust插件,只需要在 farm.config.(t|j|mj)s 的的 plugins 字段中配置其包名即可。

import { UserConfig } from '@farmfe/core';
import AutoImport from '@farmfe/plugin-auto-import'

const config: UserConfig = {
  plugins: [
    AutoImport({
       /** 选项在此 */
    })
  ]
}

功能

• 💚 支持React和React-Router开箱即用
• 🏝 树摇（Tree-shaking），仅注册实际使用的组件，减少打包体积。
• 🪐 文件夹名称作为命名空间。
• 🦾 完整的TypeScript支持。

使用

和 unplugin-auto-import插件一样的用法, 自动引入组件 不再需要 import

他会自动将这个

export function Main() {
  const [ops, setOps] = useState([])

  return (<div>
    {
      ops.map(k => (<span key={`k`}>{k}</span>))
    }
  </div>)
}

转化成这个

import {useState} from "react"
export function Main() {
  const [ops, setOps] = useState([])

  return (<div>
    {
      ops.map(k => (<span key={`k`}>{k}</span>))
    }
  </div>)
}

注意

1.暂不支持组件：目前仅支持函数 API 的自动导入，组件暂不受支持。 2.热更新限制：如果在 farm.config.(t|j|mj|cj)s 中修改了插件配置，请重启 farm server。 2.热更新限制：如果在 farm.config.(t|j|mj|cj)s 中修改了插件配置，请重启 `farm server

TypeScript

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

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

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

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

提示

在 JavaScript 项目中，如果是用来该插件并且想获取完整的函数类型提示 需要配置 jsconfig.json文件

对于 JavaScript 项目，如果需要完整的函数类型提示，可以配置 jsconfig.json 文件：

}, }

## 第三方库支持
```ts
{
  "react", // 默认配置
  "react-router", // 默认配置
  {
    from: "lodash-es", // 自动导入 lodash-es 模块中的函数
    imports: [
      "debounce",
      "throttle",
      "isEqual",
      "isEmpty",
      "isNil",
      "isFunction",
      "isObject",
      "isArray",
      "isString",
      "isNumber",
      "isBoolean",
      "isDate",
      "isRegExp",
      "isSymbol",
      "isMap",
      "isSet",
      "isWeakMap",
      "isWeakSet",
    ],
  },
}

配置

以下显示了配置的默认值

{

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

  // 转换目标（要插入自动导入的组件）的过滤器
  // 注意，这不是关于包含/排除注册组件 - 使用`Regex`来做那个
  include: ["src/components"],// 包含的目录
  exclude: ["node_modules"], // 排除的目录
   // 自动扫描的目录
  dirs: ['src/hooks', 'src/components'],
  // 需要自动导入的模块
  presets: [
    "react", // 默认配置
    "react-router", // 默认配置
  ]
}

当前默认配置有presets: ["pinia", "react", "react-router", "vue", "vue-router"], 更多详情可参考源码仓库

如需查看完整类型定义，请参考源码配置