使用场景：例如我们的项目中的
api接口是分模块的，用户相关的API接口封装在user.js里，权限相关的API接口封装在auth.js里，系统相关的API接口封装在即sys.js里，以后项目功能增加了，还会增加后续相关的各种模块的js，如果我们在一个页面中用到了很多模块的接口，一个个导入是不是非常麻烦，这时候vite提供的glob import就派上用场了。
1、例子
例如我们的项目中有这些api的js
这时候，我们如果想一次性全部引入这些js怎么办呢？答案就是我们刚刚说的glob import。
- 代码演示
const globModules =import.meta.glob('./api/*.js')
console.log(globModules)
-
输出结果
- 我们可以看到，输出了对应的js目录及其要import的语句的
{key，value}的对象,我们可以直接通过Object.entries拿到相应的key和value
Object.entries(globModules).forEach(
([k, v]) => {
console.log(k + ':' + v)
}
)
我们发现，这时候的
value是一个函数，所以我们需要在打印的时候执行下这函数
Object.entries(globModules).forEach(
([k, v]) => {
v().then(m => {
console.log(k + ':' + m.default)
})
}
)
2、引入文件格式筛选
我们在上面使用glob的使用是这样的import.meta.glob('./api/*.js')
import.meta.glob('./api/支持vite规定的格式筛选.js')
-
*.js：代表api目录下所有的.js文件，例如还可以用*.json、*.ts，都是一个道理。 -
*-[0-9].js：代表api目录下所有以‘-’开头+ 1到9数字的.js文件，例如就是api目录下的test-1.js这个文件
还要很多类似于正则的规则，大家可以去看fast-glob的官网，vite里其实就是集成了fast-glob这个插件。
3、globEager的使用
vite会直接帮助我们导入对应的js
const globModules =import.meta.globEager('./api/*.js')
console.log(globModules)
我们可以看到，会打印出对应的js及其Module，然后我们在看vite编译后的代码
可以看到vite会直接帮我们导入对应的Module，不需要我们自己去执行对应的函数了。
4、总结
glob import是vite自带的语法功能，如果你的项目中用的是其他构建工具，例如webpack，是不能使用包含glob import功能的代码的。所以大家要注意。
