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