文章目录
- 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";的语法糖。因此在这种编译配置的情况下，需要严格按照规范来定义。
