太阳遥不可及，少年一往无前。 --放学等我
Glob简介
试想一下，在前端开发中，有事我们需要一次性导入一个文件夹中的所有文件，一般是怎么做呢？
好像纯前端技术无法实现这个需求，需要借助node或者第三方库，现在借助Vite的Glob功能(本质上也是用了第三方库)，可是实现加载文件夹内文件的功能。
Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块： --Vite
简单举个栗子🌰
const modules =import.meta.glob('./dir/*.js')
modules对应的内容就是
// vite 生成的代码
const modules = {
'./dir/foo.js': () => import('./dir/foo.js'),
'./dir/bar.js': () => import('./dir/bar.js'),
}
然后遍历 modules 对象的 key 值来访问相应的模块：
for (const path in modules) {
modules[path]().then((mod) => {
console.log(path, mod)
})
}
让我们测试一下：
这里是我自己工程的目录，当前文件夹内包含的.ts 如下:
执行上述代码，替换成自己的文件夹'./*.js',打印的数据如下
可以看到，这里获取到了当前文件夹下所有对应文件格式为 TS 类型的文件。
Glob
注意，这里的模块加载是懒加载的，在构建的时候会创建单独的chunk，如果想要直接引入所有的模块，就像我们平常一个一个引入引入那样，这需要添加一个参数 { eager: true } 作为区分
const modules = import.meta.glob('./dir/*.js', { eager: true })
modules 的内容就是
使用
就这个特性而言，我实际用的主要是模块化加载路由，步骤如下：
在 router 文件夹下，新建文件夹或者新建文件，用于存放模块化的路由，比如在这里，为了做示例，modules存放模块化的路由，这里存放了 echarts 和 weather 两个模块：
其实不仅可以加载文件夹，加载模块化的文件也是可以的额，只要存放在modules文件下
那么，对应的代码该怎么样开展呢？
模块化路由加载
这里代码做了区分，对于加载文件和加载文件夹都做了兼容，可直接取用：
const modules = import.meta.glob('./modules/**/*.ts', { eager: true });
const routeModuleList = [];
// 加入到路由集合中
Object.keys(modules).forEach((key) => {
const mod = (modules)[key].default || {};
const modList = Array.isArray(mod) ? [...mod] : [mod];
routeModuleList.push(...modList);
});
本初代码的意思就是模块化加载modules下的文件，并加入到对应的路由集合中去
拓展
本处只是简单介绍了一下 Glob 的使用，更多使用方法等待大家的探索和分享~
