前言

前年我写了一篇《使用webpack的require.context实现模块自动化加载》，也就是Vue Cli支持使用webpack的require.context方法来批量导入模块。现在Vite崛起了，它给出了更好用的Glob批量导入功能，我们先研究一下它。

手册

https://cn.vitejs.dev/guide/features.html#glob-导入

体验

1. 建好一个Vite工程。

2. 在mixins文件夹创建2个js文件，比如：

a.js：

export default {
  data() {
    return {
      a: 1
    }
  }
}

b.js：

export default {
  data() {
    return {
      b: 1
    }
  }
}

3. 在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>

4. 让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，自动化程度也更高一点。代码量少很多。