Vite 模块动态导入之Glob导入
前言
在 Vite 中有一个特殊的导入方式，即我们今天打算讨论的 Glob 导入 。这种导入弥补完善了 JavaScript 导入体系中不能同时导入到某个文件目录的多个文件的缺陷。
一、快速入门
1.1 什么是 import.meta.glob
在 Vue3 和 Vite 的开发环境中， import.meta.glob() 是 Vite 提供的一个强大的模块动态导入功能，用于在构建时批量导入模块（如 Vue 文件、图片、JSON 等），并生成按需加载的代码。Glob 导入可以导入目录中的所有文件/目录，也可以对文件/目录进行匹配筛选。这在处理大量的文件，如组件、页面或其他模块时特别有用，特别是当需要根据某些条件或模式来动态加载它们时。
1.2 基本语法
const modules = import.meta.glob(pattern, // 匹配文件路径的 glob 模式：字符串或字符串数组{ // 可选配置eager?: boolean, // 是否同步导入import?: string | string[], // 指定导入的内容，例如：import: 'default'query?: string｜Record<string, string | number | boolean> // 查询参数}
);
- 所有
import.meta.glob的参数都必须以字面量传入，不可以在其中使用变量或表达式。- 路径相对于当前文件，必须是相对路径（以
./开头）或绝对路径（以/开头，相对于项目根目录解析）或一个别名路径。
二、核心功能
假设有一个 src/views/DynamicComponents 目录，里面包含多个 Vue 组件。若是根据某些条件动态地导入这些组件，那么可以使用 import.meta.glob 来实现这个需求。
2.1 基本导入
这种导入是动态导入，通过 glob 模式来匹配文件，默认返回一个函数对象，对象的键是匹配到的文件路径，值是 import() 函数，这个功能可以帮助我们实现模块的按需加载。
// 使用 import.meta.glob 导入所有组件
const modules = import.meta.glob('/src/views/DynamicComponents/*.vue')// 通过遍历 modules 对象来动态加载组件
for (const path in modules) {// 输出模块路径console.log('模块路径：', path)console.log('文件名：', path.split("/src/views/DynamicComponents/")[1].split('.vue')[0])// 等待模块加载完成，输出模块内容await modules[path]().then((mod: any) => {console.log('模块内容：', mod.default); // 这里可以访问到组件的默认导出});
}
【说明】异步加载 - 代码分割，按需加载。
2.2 同步导入
Glob 导入匹配到的文件默认是懒加载的，若是想要直接引入所有的模块，则需要借助 eager 选项， 当设置为 true 时，它会立即导入所有匹配的模块，而不是返回一个 Promise，这在某些场景下可以提高性能。
const eagerModules = import.meta.glob('/src/views/DynamicComponents/*.vue', {eager: true})for (const path in modules) {console.log(modules[path]); // 直接访问模块
}
【注意】同步加载 - 所有模块打包在一起。
2.3 指定导入内容
若是只想要导入模块中的部分内容，那么可以利用 import 选择，其允许我们指定导入模块的导出内容。
const specificImports = import.meta.glob('./DynamicComponents/*.vue', {import: 'default', // 只导入默认导出eager: true
})const multipleImports = import.meta.glob('./DynamicComponents/*.vue', {import: ['default', 'setup'], // 导入多个指定内容eager: true
})
自定义查询
还可以使用 query 选项来提供对导入的自定义查询，比如，可以将资源作为字符串引入或者作为 URL 引入。
// 作为 URL 导入
const imageUrls = import.meta.glob('./assets/*.png', {query: '?url'
})// 作为原始文本导入
const rawContents = import.meta.glob('./files/*.md', {query: '?raw'
})
三、小结
import.meta.glob 是 Vite 的核心功能，用于高效处理模块批量导入，它可以帮助我们实现模块的按需加载。通过 import.meta.glob，我们可以轻松地动态导入模块，并在 Vue3 项目中实现动态路由、懒加载组件等功能。
