前言
前年我写了一篇《使用webpack的require.context实现模块自动化加载》，也就是Vue Cli支持使用webpack的require.context方法来批量导入模块。现在Vite崛起了，它给出了更好用的Glob批量导入功能，我们先研究一下它。
手册
https://cn.vitejs.dev/guide/features.html#glob-导入
体验
建好一个Vite工程。
在mixins文件夹创建2个js文件，比如：
a.js：
export default {
data() {
return {
a: 1
}
}
}
b.js：
export default {
data() {
return {
b: 1
}
}
}
- 在components文件夹新建组件，比如TestComponent.vue
import.meta.globEager的用法，如官方所说，必须以.开头，不能用@。
Object.values(Mixins).map((v) => v.default)这句负责取出模块。
<template>
<div>{{ a }}</div>
<div>{{ b }}</div>
</template>
<script>
const Mixins = import.meta.globEager("../mixins/*.js");
export default {
mixins: Object.values(Mixins).map((v) => v.default),
};
</script>
- 让App.vue导入TestComponents.vue，就可以看到效果了。
是不是非常简单！
跟webpack批量导入功能对比
webpack使用require.context，两边区别是什么呢？
require.context这边，require.context('./mixins/', false, /\.js$/)也是遍历文件夹中的所有js文件，不过使用的是正则表达式匹配，它返回一个简单的对象，形如：
var map = {
"./a.js": "./src/mixins/a.js",
"./b.js": "./src/mixins/b.js",
};
也就是只拿到了js文件路径，接下来还需要遍历它，依次import才行，import.meta.globEager则一步到位。
总结
用glob表达式来批量引入模块，是不是很简单很鬼才？但是我从前完全想不到脚手架能支持这种操作。就好比谁都知道苹果为什么会掉在地上，但是全都是在牛顿告诉你之后。
比起webpack的require.context，自动化程度也更高一点。代码量少很多。
