理解按需自动导入 unplugin-auto-import & unplugin-vue-components

文章目录

• unplugin-auto-import
• • 基础使用
  • • 构建工具引入插件
    • 配置插件
  • import：配置自动导入规则
  • • 使用预设
    • 自动引入第三方库
    • 自动导入 TypeScript 类型
    • vue 预设的自动导入配置
  • dts：让编辑器环境识别 ts 类型
  • eslintrc：解决 eslint 检查错误
  • dirs：配置本地目录文件自动导入
• unplugin-vue-components
• • 基本使用
  • 导入流行库组件
  • 自动引入自己的本地组件
  • 自定义解析器 resolvers，实现组件库按需导入
  • 开源库的解析器写法（参考）
  • • element-plus
    • vant

unplugin-auto-import

Auto import APIs on-demand for Vite, Webpack, Rspack, Rollup and esbuild. With TypeScript support. Powered by unplugin.

基础使用

项目中的 js 模块可以使用 unplugin-auto-import 来自动引入。

比如 vue 的一些 api，ref，reactive 等，可以不用手动导入。但要明白插件只是帮助我们在编译时自动添加 import，而不是代码中可以没有 import 导入。

看看 element-plus 的自动引入配置：

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import {
    ElementPlusResolver } from "unplugin-vue-components/resolvers";
 
export default defineConfig(({
     command }) => {
   
    return {
   
        plugins: [
            vue(),
            AutoImport({
   
                resolvers: [ElementPlusResolver({
    importStyle: "sass" })],
                eslintrc: {
   
                    enabled: true
                }
            }),
            Components({
   
                resolvers: [ElementPlusResolver({
    importStyle: "sass" })]
            })
          ]
    }
}复制

安装：

pnpm i -D unplugin-auto-import复制

构建工具引入插件

因为上面是 vite 中使用，因此引入 unplugin-vue-components 的 vite 插件版本unplugin-vue-components/vite

其他常见构建工具引入：webpack、vue cli

// webpack.config.js & vue.config.js
module.exports = {
   
  /* ... */
  plugins: [
    require('unplugin-auto-import/webpack').default({
    /* options */ }),
  ],
}复制

配置插件

AutoImport({
   
  // targets to transform
  include: [
    /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
    /\.vue$/,
    /\.vue\?vue/, // .vue
    /\.md$/, // .md
  ],
 
  // global imports to register
  imports: [
    // presets
    'vue',
    'vue-router',
    // custom
    {
   
      '@vueuse/core': [
        // named imports
        'useMouse', // import { useMouse } from '@vueuse/core',
        // alias
        ['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
      ],
      'axios': [
        // default imports
        ['default', 'axios'], // import { default as axios } from 'axios',
      ],
      '[package-name]': [
        '[import-names]',
        // alias
        ['[from]', '[alias]'],
      ],
    },
    // example type import
    {
   
      from: 'vue-router',
      imports: ['RouteLocationRaw'],
      type: true,
    },
  ],
  // Enable auto import by filename for default module exports under directories
  defaultExportByFilename: false,
 
  // Auto import for module exports under directories
  // by default it only scan one level of modules under the directory
  dirs: [
    // './hooks',
    // './composables' // only root modules
    // './composables/**', // all nested modules
    // ...
  ],
 
  // Filepath to generate corresponding .d.ts file.
  // Defaults to './auto-imports.d.ts' when `typescript` is installed locally.
  // Set `false` to disable.
  dts: './auto-imports.d.ts',
 
  // Auto import inside Vue template
  // see https://github.com/unjs/unimport/pull/15 and https://github.com/unjs/unimport/pull/72
  vueTemplate: false,
 
  // Custom resolvers, compatible with `unplugin-vue-components`
  // see https://github.com/antfu/unplugin-auto-import/pull/23/
  resolvers: [
    /* ... */
  ],
 
  // Inject the imports at the end of other imports
  injectAtEnd: true,
 
  // Generate corresponding .eslintrc-auto-import.json file.
  // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
  eslintrc: {
   
    enabled: false, // Default `false`
    filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
    globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
  },
})复制

上面的配置很完整，但我们一般关注其中几个就可以了。

import：配置自动导入规则

使用预设

对于一些常见的库，插件已经内置了它的自动导入规则，如：vue、vue-router、pinia、react 等。

在 imports 数组里添加字符串就代表使用预设：

AutoImport({
   
  imports: ["vue", "vue-router", "pinia"],
}复制

自动引入第三方库

有些库没有预设，我们也想自动导入该怎么办？比如 axios、loadsh、vueuse。

使用对象语法，自定义导入规则：包名: 数组

AutoImport({
   
  imports: [
    "vue",
    // 自定义导入规则
    {
   
      '包名 ikun': [
        // 命名导入，相当于会自动添加 import { sing } from "ikun";
        'sing',
        // 设置别名导入，自动添加 import { sing as singFromIkun } from "ikun";
        ['sing', 'singFromIkun'],
      ],
    },
  ]
})复制

注意：对于默认导出的库，export default，自定义导入规则要写成别名导入的形式，导入的字段为 default。

比如 axios，我们正常使用是这样导入：

import axios from "axios"复制

因为 axios 库是 export default 默认导出的，所以我们不会 import { axios } from "axios";。
对于这种默认导出，AutoImport 自动导入规则要写成别名导入：

AutoImport({
   
  imports: [
    "vue",
    // 自定义导入规则
    {
   
      '包名 ikun': [
        // 命名导入，相当于会自动添加 import { sing } from "ikun";
        'sing',
        // 设置别名导入，自动添加 import { sing as singFromIkun } from "ikun";
        ['sing', 'singFromIkun'],
      ],
      'axios': [
        // default imports
        ['default', 'axios'], // import { default as axios } from 'axios',
      ],
    },
  ]
})复制

说白了，压根没有import axios from "axios";的写法，它只是import { default as axios} from "axios";的语法糖。因此在这种编译配置的情况下，需要严格按照规范来定义。