vite Glob 实现 责任链、注册组件

场景

下面是其中一种场景，我们定义二种方法对外提供一个方案，按需调用。

// list/test1.ts
export default () => {
  console.log("test")
}

// list/test2.ts

export default () => {
  console.log("test")
}

// index.ts
import test1 from "./list/test1";
import test2 from "./list/test2";
const modules = {
  test1,
  test2
}

function execute() {
  for (let modulesKey in modules) {
	// 条件
    modules[modulesKey]();
  }
}

⚠ 这种方式在后面想在 list 文件夹下再扩充方法时候需要改 2 个地方凡是漏掉一处都会导致程序无法运行

第一个：需要在 index.ts 导入新模块

第二个：需要 modules 注册这个新的模块

解决

我们可以使用 vite 的 Glob 方法动态导入模块。

详情 Glob 使用文档可以直接看官方的文档 地址 这里不过多描述。

这里我们可以直接修改 index.ts 文件

// 导入 list 中全部的 ts 文件
const modules: Record<string, () => void> = import.meta.glob('./list/*.ts', {
  eager: true,
  import: 'default',
});

function execute() {
  for (let modulesKey in modules) {
	// 条件
    modules[modulesKey]();
  }
}

这样子就可以实现动态导入，后面只需要在 list 文件夹中直接新建模块文件即可。

技术推广

责任链模式

// list/test1.ts
export default {
	// 处理
	execute: (args) => {

	},

	// 是否支持处理
	support: (args) => {
		return false;
    }
}

// 导入 list 中全部的 ts 文件
const modules: Record<string, () => void> = import.meta.glob('./list/*.ts', {
  eager: true,
  import: 'default',

});

function execute(args) {
  for (let modulesKey in modules) {
     if(modules[modulesKey].support(args)) {
		modules[modulesKey](args);
      }
   }

}

批量注册组件

// components/lib/ComponentDemo1.vue
<template>
  <div>我是一个组件</div>
</template>
<style lang="less" scoped></style>

// components/lib/index.ts
import type {App} from "vue";

const modules: Record<string, () => void> = import.meta.glob('./*.vue', {
  eager: true,
  import: 'default',
});


export function install(app: App) {
  for (const modulesKey in modules) {
	// 从文件路径中格式化出组件的名称
    const componentName = modulesKey.replace('./', '').replace('.vue', '')
    console.log(componentName)
    app.component(componentName, modules[modulesKey])
    // app.use(modules[modulesKey]);
  }
}

作者信息

• 多多点赞会变好看，多多留言会变有钱，多多收藏会变幸运。
• 联系方式添加微信 -xiaou- 备注:csdn