vite中正确使用unplugin-auto-import实现自动引入vue相关依赖

前言

unplugin-auto-import这个插件用于解决在书写组件时，总是需要从vue中import引入相同依赖的重复劳动。

import { computed, ref } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

使用自动引入后就不需要手动一个个import

const count = ref(0)
const doubled = computed(() => count.value * 2)

对于想偷懒的人来说，还是挺不错的。

插件会在代码被vite或者其他框架处理的时候，解析生成的源码AST（抽象语法树），找到未被导入但是在配置中定义了的模块或变量，然后在源代码中插入对应的 import 语句来导入这些模块或变量。

当配置了dts: true的时候，还会在项目根目录生成auto-imports.d.ts的类型声明文件，我们需要在tsconfig.json文件中include加入该文件，这样在编辑器中，不import引入对应模块，也不会出现语法报错。

插件地址：unplugin-auto-import

安装：

npm i unplugin-auto-import -D

vite + ts配置

vite.config.ts

import AutoImport from "unplugin-auto-import/vite";

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ["vue", "vue-router"],
      dts: true
    }),
  ],
})

imports是一些预设配置，只有插件本身支持的才可以，我们可以查看github中这个仓库的src/presets预设目录，里面存放了所有已支持的库。

往下翻可以看到支持：vue、vue-router、vuex等等...

由于我的项目对vuex做了封装，所以无法直接使用预设的vuex自动导入，所以上面代码上没写。

dts表示是否启用自动生成auto-imports.d.ts文件，填true就行了，有的人教程里填了个string路径，感觉没啥必要，按官方就行了。

接着我们在tsconfig.json的include选项中将auto-imports.d.ts加入：

tsconfig.json

{
"include": [
    "auto-imports.d.ts"
  ],
}

此时我们在vue组件中删除import引入的依赖，ts也不会报错了。

eslint配置

这个官方文档已经给出教程了，在AutoImport中增加一个配置：

AutoImport({
  eslintrc: {
    enabled: true, // <-- this
  },
})

此时启动项目会生成.eslintrc-auto-import.json文件，我们在eslint的配置文件中extends加入该文件即可：

.eslintrc.js

module.exports = {
  extends: [
    './.eslintrc-auto-import.json',
  ],
}