Vite 2 + Vue 3 实现批量导入模块

当项目使用 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 模式。