unplugin-auto-import：按需自动导入插件的指南与问题解答-CSDN博客

本文链接：https://blog.csdn.net/gitblog_07654/article/details/142231009

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

unplugin-auto-import unplugin-auto-import - 一个插件，用于在 Vite、Webpack、Rspack、Rollup 和 esbuild 中自动按需导入 API，支持 TypeScript，适合希望简化代码中导入语句的前端开发者。项目地址: https://gitcode.com/gh_mirrors/un/unplugin-auto-import

项目基础介绍

unplugin-auto-import 是一个强大的开源工具，专为 Vite、Webpack、Rspack、Rollup 以及 esbuild 设计，旨在实现按需自动导入各类 API。此项目特别支持 TypeScript，且由 unplugin 助力，简化了开发者对常用库的导入过程，从而提高编码效率。无需手动导入 Vue、React 等框架的每一个功能或 Hook，unplugin-auto-import 可自动处理这一切。

主要编程语言

项目核心使用 JavaScript，并借助 TypeScript 进行类型注解，保证了其代码质量和易用性。

新手使用注意事项及解决步骤

注意事项 1：配置正确性

问题描述: 新手可能会因配置错误导致自动导入不生效。 解决步骤:

检查安装: 确保已通过 npm i -D unplugin-auto-import 安装插件。
配置插件: 在项目对应的配置文件（如 vite.config.js, webpack.config.js）中正确引入并配置 AutoImport。例如，在 Vite 中添加以下代码段：
```
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      // 根据官方文档添加具体配置
    })
  ]
}
```
重启服务: 修改配置后，务必重启开发服务器使更改生效。

注意事项 2：ESLint兼容问题

问题描述: 自动导入可能导致 ESLint 报“未定义”的错误。 解决步骤:

启用ESLintrc: 在unplugin-auto-import配置中启用eslintrc选项。
```
AutoImport({
  eslintrc: {
    enabled: true
  }
})
```
配置ESLint: 更新或创建 .eslintrc.js 文件，并扩展 eslintrc-auto-import.json 配置。
```
module.exports = {
  extends: ['./eslintrc-auto-import.json']
};
```

注意事项 3：非预设库的自定义导入

问题描述: 对于非官方库或未达到预设要求的库，自动导入可能不支持。 解决步骤:

使用resolvers: 如果想要支持特定非预设库，可以通过定义自定义解析器(resolvers)来实现。

import AutoImport from 'unplugin-auto-import/vite'

export const AutoImportDeps = () => AutoImport({
  imports: ['your-library-name'],
  resolvers: [/* 自定义解析逻辑 */],
});