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

燕羽即墨

🧑‍💻 写在开头

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

 

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

🔍 开发痛点分析

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

1. 重复导入常用模块 - 如 dayjs、lodash 等工具库
2. 频繁引用枚举值 - 相同的 enum 需要在多个文件中重复导入
3. 全局函数频繁导入 - 如 Element Plus 的 ElMessage、ElLoading 等组件
4. 冗余导入语句 - 复制粘贴代码导致的未使用引入，影响代码整洁度
5. 类型丢失问题 - 导入有时出现类型推导失败（理论上不应出现，但在实际开发中确实存在）

⚡ 问题根源

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

💡 解决方案

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

🛠️ 实现步骤

1️⃣ 安装必要依赖

首先安装相关依赖包：

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

　　

2️⃣ 创建公共导出文件

创建一个独立的 TypeScript 文件作为中转导出（解决类型丢失问题，详细原因参考这里）：

// @/utils/lib-export.ts
import 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.ts
export 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

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

来源：https://www.cnblogs.com/smileZAZ/p/19034209