?? 写在开头
点赞 + 收藏 === 学会???
unplugin-auto-import：为 Vite、Webpack、Rollup 设计的按需自动导入 API 的强大工具
? 开发痛点分析
在日常前端开发中，我们经常遇到以下困扰：
- 重复导入常用模块 - 如 dayjs、lodash 等工具库
- 频繁引用枚举值 - 相同的 enum 需要在多个文件中重复导入
- 全局函数频繁导入 - 如 Element Plus 的 ElMessage、ElLoading 等组件
- 冗余导入语句 - 复制粘贴代码导致的未使用引入，影响代码整洁度
- 类型丢失问题 - 导入有时出现类型推导失败（理论上不应出现，但在实际开发中确实存在）
⚡ 问题根源
- 模块化的双刃剑 - 模块化开发要求明确声明每一个依赖来源
- 项目规模膨胀 - 随着需求迭代，组件和工具函数数量激增
? 解决方案
采用 unplugin-auto-import 库实现按需自动导入所需 API。该方案可让项目全局感知使用位置，开发者只需直接使用相关函数和组件，无需手动导入。
?️ 实现步骤
1️⃣ 安装必要依赖
首先安装相关依赖包：
npm install dayjs lodash-es element-plus npm install unplugin-auto-import -D
2️⃣ 创建公共导出文件
创建一个独立的 TypeScript 文件作为中转导出（解决类型丢失问题，详细原因参考这里）：
// @/utils/lib-export.tsimport dayjs from "dayjs";import { ElMessage, ElMessageBox, ElLoading, ElButton } from "element-plus";import { keyBy, cloneDeep, isNil } from "lodash-es";export { dayjs, ElMessage, ElMessageBox, ElLoading, ElButton, keyBy, cloneDeep, isNil };
3️⃣ 配置 Vite
在 vite.config.ts 中添加以下配置：
AutoImport({ vueTemplate: true, // 注意：此选项必须开启，否则 .vue 模板中将检测不到自动导入（文档默认关闭） imports: [ "vue", "vue-router", { "@/utils/lib-export": [ ["dayjs"], ["ElMessage"], ["ElMessageBox"], ["ElLoading"], ["ElButton"], ["keyBy"], ["cloneDeep"], ["isNil"] ], }, ],}),
4️⃣ 更新 TypeScript 配置
将自动生成的类型声明文件添加到 TypeScript 配置中：auto-imports.d.ts
// tsconfig.app.json{ "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "auto-imports.d.ts"]}
? 扩展应用：自定义枚举自动导入
同理，我们也可以将自定义的枚举或函数注入到全局。以枚举为例：
1️⃣ 定义全局枚举
// @/enums/sex-enum.tsexport enum SexEnum { Man, Woman, Unknown,}
2️⃣ 在 Vite 配置中添加
imports: [ 'vue', 'vue-router', { '@/enums/sex-enum': [['SexEnum']], },],? 新旧方案对比
⚠️ 过去的方案
在没有 unplugin-auto-import 这个插件（由 Anthony Fu 开发）之前，Vue2 项目中通常采用以下方式：
- 将工具函数直接挂载到
Vue.prototype上，通过this访问 - 手动挂载到全局
window对象上
这些方式存在明显缺点：
- 需要手动编写
declare声明文件 - 全局变量污染
- 不符合现代模块化开发理念
✅ 现在的方案
使用 unplugin-auto-import 后的优势：
- 代码简洁：符合现代标准，减少样板代码
- 开发体验佳：无需重复导入，专注业务逻辑
- 无污染：不会污染全局变量命名空间
- 类型完整：保持完整的 TypeScript 类型支持和智能提示
? 结语
这是一个简单但功能强大的配置方案，可以极大地提升前端开发体验和效率。它适用于各种规模的 Vue、React 或其他前端项目，你可以根据项目需求灵活调整需要自动导入的内容。
? 希望这个小技巧能帮助大家提高工作效率，早点下班，永不加班！
本文转载于：https://juejin.cn/post/7503769523947044904
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
