Vue自动导入神器 unplugin-auto-import 支持自己的库

前言

unplugin-auto-import是为 Vite、Webpack、Rollup 和 esbuild 按需自动导入 API。近期，作者写的Vue3的函数库完成生态建设的最后一步，自动导入API，写的过程中发现这方面的资料干货不多，所以在这里和大家分享一下，如何给自己的库支持自动导入。

unplugin-auto-import 原理

以 vue与vite为例，会读取文件中script部分的字符，以空白符进行间隔，如const a = getName() 会过滤一些指定的字符读取到 const 、 a 、getName这些字符串传入unplugin-auto-import 作为 name，那么在运行的时候只需要匹配name 是否与生效的自动导入API匹配，如果匹配则在vite启动的时候将对应的文件加入到运行环境中，并且生成全局ts声明。

支持自动导入的三种方式

Prese

让官方直接给你设置预设，到时版本更新你可以下载新版本 unplugin-auto-import，然后 👇

/**
 * @name AutoImportDeps
 * @description auto-import lib
 */
import AutoImport from 'unplugin-auto-import/vite'

export const AutoImportDeps = () =>
  AutoImport({
    imports: ['vue', 'vue-router','你的库的名字'],
    include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
    dts: 'src/auto-imports.d.ts',
  })

但是有个比较苛刻的条件，官方设置预设的要求

意思就是你的库需要 GitHub 1k🌟 或者 npm 周下载量1000+才有成为预设的资格,对于比较新的库来说这个不太切实际。

Project Directory

unplugin-auto-import option 有一个配置项 dirs 允许用户指定项目中的文件夹作为自动导入API，但是它并不支持库的形式，只能导入正在开发的项目中的文件夹。

/**
 * @name AutoImportDeps
 * @description auto-import lib
 */
import AutoImport from 'unplugin-auto-import/vite'

export const AutoImportDeps = () =>
  AutoImport({
   // Path for directories to be auto imported
    dirs:你的文件夹路径
  })

Resolver

unplugin-auto-import 提供 resolvers 允许用户自定义解析器，也就是用户需要自己根据匹配的name，自行决定导入规则。

比如我有一个函数库，名为 vue-lib ,里面导出一个对象{ func1,func2,func3 }三个函数。resolver 👇

let hooks = ['func1','func2','func3']

function resolveHooks(name: string) {
  if (!hooks) return
  if (!hooks.includes(name)) return

  return {
    name,
    from: 'vue-lib',
  }
}

export function LibResolver(): Resolver {
  return name => {
    return resolveHooks(name)
  }
}
export default LibResolver

使用

/**
 * @name AutoImportDeps
 * @description auto-import lib
 */
import AutoImport from 'unplugin-auto-import/vite'

export const AutoImportDeps = () =>
  AutoImport({
    imports: ['vue', 'vue-router','你的库的名字'],
    include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
    dts: 'src/auto-imports.d.ts',
    resolvers:[LibResolver()]
  })

vue文件中

// 没有import
const getFunc1 = func1()

unplugin-auto-import 每次匹配一个name 都会调用 LibResolver 将 name传入触发我们自定义的 resolveHooks,然后将name与hooks数组里面的元素比较，如果相同则证明这个是需要按需引入的。 上面的例子匹配到func1 并且无 import 则证明这个func1需要自动按需，那么就会

  return {
    name,
    from: 'vue-lib',
  }

from 是你库的名字，name是匹配成功的name。大功告成 🐎

结语

上述是比较简单的一个学习案例，更多复杂功能可以在其中加入，比如name的前缀 prefix。 对于组件库来说 unplugin-vue-components 和这个差不多，多了对指令和样式的处理，在看完我这篇，然后具体可以看一下官方预设。

对于规范开发来说，库需要有meta-data.json用户记录库的元数据，比如上述例子 let hooks = ['func1','func2','func3'],里面的数据可以从meta-data.json读取赋值给 hooks变量。

更多

作者写的库的resolver

喜欢的小伙伴 star 🌟 支持作者冲上官方预设。