前端依赖自动导入：unplugin-auto-import

简介

unplugin-auto-import 是一个 Vite/Webpack/Rollup 插件，用于自动导入 API，无需手动编写 import 语句。支持 Vue、Vue Router、Pinia 等库，以及自定义工具函数。

安装

npm install -D unplugin-auto-import

使用案例

AutoImport 管 API、Components 管组件

//vite.config.js
AutoImport({  //用于 API 导入
  imports: ['vue', 'vue-router', { '@vueuse/core': ['useMouse', ['useFetch', 'useMyFetch']] }],
  resolvers: [ElementPlusResolver()],
  dirs: ['./src/utils/format.js','./hooks', './composables/**'],
}),
Components({  // 用于组件导入
  resolvers: [ElementPlusResolver()]，
  dirs:['./components/**']
})

AutoImport 代码详解

1. imports

imports ------ 声明 "从哪个包自动导入哪些导出"

imports: ['vue'] :'vue'是内置预设（preset），一个字符串代表一整组导出。这里的vue实际展开是ref、computed、watch、onMounted、nextTick 等 Vue 组合式 API 内置预设本质上是预先生成好的 { from: '包名', imports: [...] } 配置 例如：

export default defineUnimportPreset({
  from: 'vue',
  imports: ['onMounted', 'onUnmounted', 'onUpdated'],
})

imports: [{ '@vueuse/core': ['useMouse', ['useFetch', 'useMyFetch']] }]: 这是 imports 的导入指定的 API的方法, 'useMouse' 相当于 import { useMouse } from '@vueuse/core' ['useFetch', 'useMyFetch'] 相当于 import { useFetch as useMyFetch } from '@vueuse/core' 合起来就是import { useMouse,useFetch as useMyFetch } from '@vueuse/core'

2. resolvers

resolvers ------ 给插件一个 "遇到未知标识符时的解析函数" imports 是预声明列表 ，resolvers 是按需判断 ：插件在转换时遇到一个没见过的标识符（如 ElMessage），就把名字丢给 resolver，resolver 返回 "该从哪个模块引入"。

ElementPlusResolver 专门匹配 El 开头的函数式 API：ElMessage、ElNotification、ElMessageBox、ElLoading，并且返回 element-plus 的按需子路径 （如 element-plus/es 下的对应模块），保证只打包用到的部分。

ElementPlusResolver 其实不 "认识"ElMessage，它靠的是规则匹配 ------ 插件把所有 "用到了却没定义的标识符" 都丢给它的 resolve(name) 函数，它用几道规则过滤，命中的才返回导入信息。

如果你自己写个组件叫 ElFooBar，也会被它当成 element-plus 的组件导入，需要使用exclude来进行排除

Components({
  resolvers: [
    ElementPlusResolver({
      exclude: /^ElFooBar$/,                        // 排除一个
      // exclude: /^(ElFooBar|ElMyComp)$/,          // 排除多个
      // exclude: /^El(?!Message|Button)/,          // 排除除 Message/Button 外的所有 El*（复杂规则）
    }),
  ],
})

3. dirs

dirs ------ 扫描你自己的目录，把 "文件" 变成可自动导入的模块

dirs: ['./hooks', './composables/**'] ./hooks：只扫描该目录第一层 ，下面每个 .ts/.js 文件的导出自动注册； ./composables/**：glob 通配，递归所有子目录。

比如你建一个 hooks/useTheme.ts 并 export function useTheme()，那么任何组件里直接 useTheme() 即可，插件会自动补上对应的 import------新增文件无需改任何配置。

4. vueTemplate

vueTemplate: true：在模板中也能使用自动导入的函数

<template>
  <!-- 直接使用不需要导入 -->
  <div>{{ sum(num) }}</div>
</template>

5. exclude

匹配到的文件不参与自动导入

AutoImport({
  exclude: [
    /[\\/]node_modules[\\/]/,
    /[\\/]\.git[\\/]/,
    /src\/legacy\//,        // 排除旧代码目录
    /\.spec\.ts$/,          // 排除测试文件
    /\.d\.ts$/,             // 排除类型声明文件
  ],
})

Components 代码详解

Components用法基本与imports相同，但是Components无法使用imports导入

AutoImport({  //用于 API 导入
  resolvers: [ElementPlusResolver()]
}),
Components({  // 用于组件导入
  resolvers: [ElementPlusResolver()]
})

AutoImport和Components里面的的ElementPlusResolver是同一个东西 ------ 传给 Components 时处理 <el-xxx> 组件 ，传给 AutoImport 时处理 ElMessage 这类 API