记录---高效前端开发：利用 unplugin-auto-import 实现依靠自动导入

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣
 

unplugin-auto-import：为 Vite、Webpack、Rollup 计划的按需自动导入 API 的强盛工具

🔍 开发痛点分析

在日常前端开发中，我们经常碰到以下困扰：

• 重复导入常用模块 - 如 dayjs、lodash 等工具库
  
• 频繁引用罗列值 - 雷同的 enum 需要在多个文件中重复导入
  
• 全局函数频繁导入 - 如 Element Plus 的 ElMessage、ElLoading 等组件
  
• 冗余导入语句 - 复制粘贴代码导致的未利用引入，影响代码整齐度
  
• 范例丢失问题 - 导入有时出现范例推导失败（理论上不应出现，但在现实开发中确实存在）
  

⚡ 问题根源

• 模块化的双刃剑 - 模块化开发要求明确声明每一个依靠泉源
  
• 项目规模膨胀 - 随着需求迭代，组件和工具函数数量激增
  

💡 办理方案

采用 unplugin-auto-import库实现按需自动导入所需 API。该方案可让项目全局感知利用位置，开发者只需直接利用相干函数和组件，无需手动导入。
🛠️ 实现步骤

1️⃣ 安装必要依靠

起首安装相干依靠包：

1. npm install dayjs lodash-es element-plus
2. npm install unplugin-auto-import -D

复制代码

　　
2️⃣ 创建公共导出文件

创建一个独立的 TypeScript 文件作为中转导出（办理范例丢失问题，具体缘故原由参考这里）：

1. // @/utils/lib-export.ts
2. import dayjs from "dayjs";
3. import { ElMessage, ElMessageBox, ElLoading, ElButton } from "element-plus";
4. import { keyBy, cloneDeep, isNil } from "lodash-es";
5. export { dayjs, ElMessage, ElMessageBox, ElLoading, ElButton, keyBy, cloneDeep, isNil };

复制代码

　　
3️⃣ 设置 Vite

在 vite.config.ts 中添加以下设置：

1. AutoImport({
2.   vueTemplate: true, // 注意：此选项必须开启，否则 .vue 模板中将检测不到自动导入（文档默认关闭）
3.   imports: [
4.     "vue",
5.     "vue-router",
6.     {
7.       "@/utils/lib-export": [
8.         ["dayjs"],
9.         ["ElMessage"],
10.         ["ElMessageBox"],
11.         ["ElLoading"],
12.         ["ElButton"],
13.         ["keyBy"],
14.         ["cloneDeep"],
15.         ["isNil"]
16.       ],
17.     },
18.   ],
19. }),

复制代码

　　
4️⃣ 更新 TypeScript 设置

将自动生成的范例声明文件添加到 TypeScript 设置中：auto-imports.d.ts

1. // tsconfig.app.json
2. {
3.   "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "auto-imports.d.ts"]
4. }

复制代码

　　
🧩 扩展应用：自定义罗列自动导入

同理，我们也可以将自定义的罗列或函数注入到全局。以罗列为例：
1️⃣ 定义全局罗列

1. // @/enums/sex-enum.ts
2. export enum SexEnum {
3.   Man,
4.   Woman,
5.   Unknown,
6. }

复制代码

　　
2️⃣ 在 Vite 设置中添加

1. imports: [
2.   'vue',
3.   'vue-router',
4.   {
5.     '@/enums/sex-enum': [['SexEnum']],
6.   },
7. ],

复制代码

📊 新旧方案对比

⚠️ 过去的方案

在没有 unplugin-auto-import 这个插件（由 Anthony Fu 开发）之前，Vue2 项目中通常采用以下方式：

• 将工具函数直接挂载到 Vue.prototype 上，通过 this 访问
  
• 手动挂载到全局 window 对象上
  

这些方式存在明显缺点：

• 需要手动编写 declare 声明文件
  
• 全局变量污染
  
• 不符合当代模块化开发理念
  

✅ 现在的方案

利用 unplugin-auto-import 后的上风：

• 代码简洁：符合当代标准，减少样板代码
  
• 开发体验佳：无需重复导入，专注业务逻辑
  
• 无污染：不会污染全局变量命名空间
  
• 范例完整：保持完整的 TypeScript 范例支持和智能提示
  

🎯 结语

这是一个简朴但功能强盛的设置方案，可以极大地提升前端开发体验和效率。它实用于各种规模的 Vue、React 或其他前端项目，你可以根据项目需求灵活调整需要自动导入的内容。

🚀 希望这个小技巧能帮助各人进步工作效率，早点放工，永不加班！

 
本文转载于：https://juejin.cn/post/7503769523947044904

如果对您有所帮助，欢迎您点个关注，我会定时更新技能文档，各人一起讨论学习，一起进步。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。