自动加载 modules
- 安装包
npm i vite-plugin-use-modules -D
- 注册插件
// vite.config.js or vite.config.ts
import { defineConfig } from "vite";
import Modules from "vite-plugin-use-modules";
export default defineConfig({
plugins: [Modules()],
});
- 获取所有模块
import { modules } from "virtual:modules";
console.log(modules); // src/modules 的所有模块都会被获取到
- 使用
src/modules
下的默认导出函数
// eg: src/modules/router.ts
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
routes: [],
history: createWebHistory(),
});
export default (app: App) => app.use(router);
// 如果足够兼容,可以直接导出插件
// export default router
// 如果需要选项,则可以导出数组,第二个参数即为选项
// export default [router, options]
import App from "./App.vue";
import { createApp } from "vue";
import { useModules } from "virtual:modules";
const app = createApp(App);
useModules(app); // 这将注册所有的 Vue 插件
app.mount("#app");
如果你是 ts
项目,可以在 tsconfig.json
中添加如下配置
{
"compilerOptions": {
"types": ["vite-plugin-use-modules/client"]
}
}
- 修改目标目录
import { defineConfig } from "vite";
import Modules from "vite-plugin-use-modules";
export default defineConfig({
plugins: [
Modules({
target: "src/plugins", // 这将加载 src/plugins 下的模块,默认为 src/modules
}),
],
});
- 自动模式
import { defineConfig } from "vite";
import Modules from "vite-plugin-use-modules";
export default defineConfig({
plugins: [
Modules({
auto: true, // 开启自动模式,auto 也支持 vite 插件的所有 transform 类型
}),
],
});
开启后,虚拟模块的注册是非必需的
import App from './App.vue'
import { createApp } from 'vue'
- import { useModules } from 'virtual:modules'
const app = createApp(App)
- useModules(app)
app.mount('#app')
- 规范化
import { defineConfig } from "vite";
import Modules from "vite-plugin-use-modules";
export default defineConfig({
plugins: [
Modules({
normalize(target) {
return `'${target}/*.[tj]s'`; // 返回扫描的 glob
},
}),
],
});
- 顺序
可以通过对文件名添加数字前缀来控制模块的加载顺序,例如 1.foo.ts
将比
2.bar.ts
优先加载,以此类推。
欢迎关注 帝莎编程
Made with markthree
Published under MIT License.