vite中的glob-import批量导入

在 Vite 中，批量导入文件的最佳实践是使用 glob导入特性。这个特性可以在一行代码中导入多个文件，而不需要为每个文件编写独立的导入语句。

一般的使用场景是，当文件过多或者需要动态导入模块时，我们需要手动一个个去 import，但是使用 glob-import 就可以避免这种情况了，大大提高了开发效率。

Vite 是使用 ES 模块语法进行编程的新型前端构建工具，对于ES 模块的glob 导入提供了原生支持。

假设有以下目录结构：

components/
 ├── Foo.vue
 ├── Bar.vue
 └── Baz.vue

你可以使用 glob 导入一次性导入所有组件：
Vite中的 import.meta.glob 和 import.meta.globEager 是两个用于模块映射和批量导入的方法。

这两者与webpack中的 require.context 功能相似，但更具灵活性，可以有效的实现在Vue中动态导入组件。

两者的主要区别在于加载方式：import.meta.glob 是异步加载，返回的是一个包含路径和返回Promise的对象，需要在需要时调用；而 import.meta.globEager 是同步加载，返回的是一个包含路径和模块内容的对象，适合于模块较少的情况。

两者的基本用途都是批量导入模块，不过import.meta.glob返回的是一个由模块路径和模块异步导入函数构成的键值对对象，而import.meta.globEager返回的是一个由模块路径和模块导出值构成的键值对对象。

首先，列出vite中文档对于这两个函数的定义：

• import.meta.glob: 一个返回由Promise异步引入的键值对对象（相对于当前模块的相对路径 -> 该模块的异步导入函数）。

• import.meta.globEager: 一个返回由同步引入的键值对对象（相对于当前模坐的相对路径 -> 该模块的导出对象）。

接下来，通过以下例子一一说明这两者的应用场景和用法。

首先是 import.meta.glob：

// 使用 import.meta.glob 导入所有 Vue 组件
let globModules= import.meta.glob('./components/*.vue')
console.log(globModules)
// 导入结果是一个对象，键为文件相对路径，值为返回模块Promise 的函数
// {
//   './components/Foo.vue': () => Promise<{ default: object }>,
//   './components/Bar.vue': () => Promise<{ default: object }>,
//   './components/Baz.vue': () => Promise<{ default: object }>
// }
Object.entries(globModules).forEach(([path, globModule]) => {
    console.log(path, globModule)
    globModule().then((mod) => {
        console.log(path + '模块内容', mod.default)
    })
})
// `import.meta.glob` 是异步加载，适合于模块较多或者模块较大的情况
// 当调用该函数并await得到的时候，会返回模块的内容

接下来看 import.meta.globEager：

// 使用 import.meta.globEager 同步导入所有 Vue 组件
let globModules= import.meta.globEager('./components/*.vue')
console.log(globModules)
// 导入结果是一个对象，键为文件相对路径，值为模块对象
// {
//   './components/Foo.vue': {default: object},
//   './components/Bar.vue': {default: object},
//   './components/Baz.vue': {default: object}
// }

Object.entries(globModules).forEach(([path, globModule]) => {
    console.log(path + '模块内容', globModule.default)
})
// `import.meta.globEager` 是同步加载，适合于模块较少或者模块较小的情况
// 导入后可以直接获取到模块的内容

值得注意的是，对于Vue组件，模块内容都是在default中，所以访问时需要加上.default。

其中import.meta.glob可用于代码分割或者基于用户交互的延迟加载，而import.meta.globEager适合于模块较小，希望立即加载，并且不会由于尺寸过大而影响应用性能的情况。

使用 Vite 的 glob 导入，可以完成模块引用的实时更新，以及开发服务器的热更新。

注意事项：

• glob 导入只能在模块顶级使用，并且无法在动态条件或嵌套作用域内部动态调用。
• import.meta.glob在生产环境构建时将被静态地分析并构建成单独的模块。
• 引入的路径必须是相对路径(例如，import.meta.glob(‘./dir/.vue’))，不能是绝对路径（例如，import.meta.glob('/dir/.vue’)）。因为绝对路径在不同的操作系统上的文件路径可能不同。