当项目使用 webpack 作为构建工具时，批量导入可以用require.context实现 ➡️ 【利用 webpack 的 require.context 自动注册 vue 全局组件】
Vite 2 则需要通过import.meta.glob 或 import.meta.globEager实现同样的功能。➡️ 📃 Vite 2 Glob 导入文档
-
import.meta.globEager是直接引入所有的模块。 -
import.meta.glob匹配到的文件默认是懒加载的，通过动态导入实现，并会在构建时分离为独立的 chunk。 - 传入的路径必须是以
./开头(相对路径) 或以 /开头(相对于项目根目录解析的的绝对路径)。
我们以 Vuex 4 批量导入store模块为例。
我的store目录结构
import.meta.globEager直接引入
📃src/store/index.js：
import { createStore } from 'vuex'
import getters from './getters'
// 直接引入所有的模块
const modulesFiles = import.meta.globEager('./modules/**/*.js')
const modules = {}
for (const key in modulesFiles) {
modules[key.replace(/(\.\/modules\/|\.js)/g, '')] = modulesFiles[key].default
}
Object.keys(modules).forEach(item => {
modules[item]['namespaced'] = true
})
const store = createStore({
modules,
getters,
})
export default store
import.meta.glob动态引入
📃src/store/index.js：只贴有差异的部分
// 动态引入所有的模块
const modulesFiles = import.meta.glob('./modules/**/*.js')
for (const key in files) {
files[key]().then(res=>{
modules[key.replace(/(\.\/modules\/|\.js)/g, '')] = res.default
})
}
ℹ️ tips：Glob 匹配是使用 fast-glob 来实现的 —— 阅读它的文档来查阅 支持的 Glob 模式。
