vite-auto-import-resolvers v3.2.1
推荐
unplugin-auto-import 已经内置
dirs
选项,推荐优先使用
vite-auto-import-resolvers
unplugin-auto-import 的
vite resolvers
,主要处理 vite
项目本身的 api
按需自动引入。
README 🦉
简体中文 | English
动机 🐇
为了按需自动引入指定目录下模块的 api
。
基本使用 🦖
- 安装
npm i vite-auto-import-resolvers unplugin-auto-import -D
- 配置插件
// vite.config.js
import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import AutoImports from "unplugin-auto-import/vite";
import { dirResolver, DirResolverHelper } from "vite-auto-import-resolvers";
export default defineConfig({
plugins: [
Vue(),
// 该辅助插件也是必需的 👇
DirResolverHelper(),
AutoImports({
imports: ["vue"],
resolvers: [dirResolver()],
}),
],
});
- 之后
src/composables
下模块的默认导出将在项目中自动按需引入
例如 👇
// src/composables/foo.ts
export default 100;
// src/App.vue
<script setup>
console.log(foo) // 输出100,而且是按需自动引入的
</script>
<template> Hello World!! </template>
进阶 🦕
强制前缀与后缀
import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import AutoImports from "unplugin-auto-import/vite";
import { dirResolver, DirResolverHelper } from "vite-auto-import-resolvers";
export default defineConfig({
plugins: [
Vue(),
DirResolverHelper(),
AutoImports({
imports: ["vue"],
resolvers: [
dirResolver({ prefix: "use" }), // 强制前缀为 use
dirResolver({
target: "src/stores", // 目标目录,默认为 'src/composables'
suffix: "Store", // 强制后缀为 Store
}),
],
}),
],
});
于是
src/composables
下只有use
开头的模块会被按需加载src/stores
下只有Store
结尾的模块会被按需加载
例如 👇
// src/stores/counterStore.ts
const counter = ref(100);
export default () => {
const inc = (v: number = 1) => (counter.value += v);
return {
inc,
counter,
};
};
<script setup lang="ts">
// 这将按需自动引入
const n = counterStore()
</script>
<template>
<div @click="n.inc()">{{n.counter}}</div>
</template>
包含与排除
import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import AutoImports from "unplugin-auto-import/vite";
import { dirResolver, DirResolverHelper } from "vite-auto-import-resolvers";
export default defineConfig({
plugins: [
Vue(),
DirResolverHelper(),
AutoImports({
imports: ["vue"],
resolvers: [
dirResolver({
prefix: "use",
include: ["foo"], // 即使 foo 模块不是以 use 开头也会被包含进来
exclude: ["useBar"], // useBar 模块将始终被排除
}),
],
}),
],
});
规范路径
通过 normalize
可以控制最终路径的生成
import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import AutoImports from "unplugin-auto-import/vite";
import { dirResolver, DirResolverHelper } from "vite-auto-import-resolvers";
export default defineConfig({
plugins: [
Vue(),
DirResolverHelper(),
AutoImports({
imports: ["vue"],
resolvers: [
dirResolver({
normalize({ path, target, name }) {
return path;
},
}),
],
}),
],
});
自动生成按需 api
预设
在使用 unplugin-auto-imports
时,需要手动管理 imports
👇
import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import AutoImports from "unplugin-auto-import/vite";
export default defineConfig({
plugins: [
Vue(),
AutoImports({
imports: ["vue", "vue-router", "pinia"], // 手动管理
}),
],
});
但有时候你可能需要去变动一些依赖,例如将 pinia
换成
vuex
,这时如果配置未更改就会发生错误。同时如果你设置了未安装的包,这将造成无谓的性能消耗。
所以你能这样 👇
import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import AutoImports from "unplugin-auto-import/vite";
import { AutoGenerateImports } from "vite-auto-import-resolvers";
export default defineConfig({
plugins: [
Vue(),
AutoImports({
imports: AutoGenerateImports(), // 自动管理,只有对应的包有装时才会自动按需设置预设
}),
],
});
默认支持列表
include
属性
- vue
- pinia
- vuex
- vitest
- vue-i18n
- vue-router
- @vueuse/core
- @vueuse/head
- @nuxtjs/composition-api
- preact
- quasar
- react
- react-router
- react-router-dom
- svelte
- svelte/animate
- svelte/easing
- svelte/motion
- svelte/store
- svelte/transition
- vitepress
- vee-validate
手动排除
当然你可以手动排除掉不想要的 👇
import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import AutoImports from "unplugin-auto-import/vite";
import { AutoGenerateImports } from "vite-auto-import-resolvers";
export default defineConfig({
plugins: [
Vue(),
AutoImports({
imports: AutoGenerateImports({
exclude: ["pinia"], // pinia 将始终被排除
}),
}),
],
});
启发 🐳
该 resolvers
来源于 unplugin-auto-import
的 issue
讨论 👉
How should I auto import composition functions。
更多 🐃
更多项目工程实践可见 👉 tov-template
License 🐸
Made with markthree
Published under MIT License.
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago