unplugin-auto-import：按需自动导入插件指南及问题解答

项目基础介绍

unplugin-auto-import 是一款由 Antfu 开发的高效工具，专为 Vite、Webpack、Rollup、Rspack 和 esbuild 设计，旨在实现API的按需自动导入功能，全面支持 TypeScript。此项目利用 unplugin 架构，简化了Vue、React等框架中常用API的导入过程，从而提升开发效率。通过该插件，开发者无需手动引入如Vue的ref, computed或React的useState等常用函数，显著减少了代码体积并加快了编译速度。

主要编程语言： JavaScript（ESNext），TypeScript

新手使用注意事项及解决方案

问题1：未正确安装导致无法自动导入

解决步骤：

1. 确保安装：首先通过npm或yarn全局或局部安装unplugin-auto-import。命令示例：npm install -D unplugin-auto-import。

2. 配置插件：在项目的构建配置文件中（如vite.config.js或webpack.config.js）添加unplugin-auto-import插件，并按照文档指示配置相应的选项。

   // vite.config.js 示例
   import { defineConfig } from 'vite';
   import AutoImport from 'unplugin-auto-import/vite';
   
   export default defineConfig({
     plugins: [
       AutoImport({
         // 根据需要配置选项
       }),
     ],
   });
   

问题2：遇到ESLint “no-undef”错误

解决步骤：

1. 启用Eslint集成：在unplugin-auto-import配置中开启eslintrc支持。

   AutoImport({
     eslintrc: {
       enabled: true,
     },
   });
   

2. 更新Eslint配置：在你的.eslintrc.*文件中扩展提供的配置文件。

   "extends": ["./eslintrc-auto-import.json"]
   

   注意，可能需要创建或修改相应配置文件来包含正确的导入规则。

问题3：希望为非预设库添加自动导入但不符合官方预设要求

解决步骤：

1. 使用resolvers自定义解析器：如果你的库不在官方预设列表内（要求如1k颗星或npm周下载量1000+），可以利用自定义解析器(resolvers)功能。

   • 定义一个resolver函数，用于匹配和解析特定的库名。
   • 在unplugin-auto-import配置中添加此自定义解析器。

   示例：

   import AutoImport from 'unplugin-auto-import/vite';
   
   export const AutoImportDeps = () => AutoImport({
     resolvers: [
       // 自定义逻辑，判断并返回导入路径
       (importName) => {
         if (importName.startsWith('vue-lib')) {
           return './path/to/vue-lib'; // 替换成你的库的实际路径
         }
         return null;
       },
     ],
   });
   

2. 配置dirs选项：若想导入当前项目内的特定文件夹而非发布库，可通过dirs配置项指定目录。

确保遵循上述步骤后，您的开发环境应能顺利地实现期望的自动导入功能，避免常见的陷阱和错误。