Vite 模块动态导入之Glob导入

前言

在 Vite 中有一个特殊的导入方式，即我们今天打算讨论的 Glob 导入。这种导入弥补完善了 JavaScript 导入体系中不能同时导入到某个文件目录的多个文件的缺陷。

一、快速入门

1.1 什么是 import.meta.glob

在 Vue3 和 Vite 的开发环境中， import.meta.glob() 是 Vite 提供的一个强大的模块动态导入 功能，用于在构建时批量导入模块（如 Vue 文件、图片、JSON 等），并生成按需加载的代码。Glob 导入可以导入目录中的所有文件/目录，也可以对文件/目录进行匹配筛选。这在处理大量的文件，如组件、页面或其他模块时特别有用，特别是当需要根据某些条件或模式来动态加载它们时。

1.2 基本语法

javascript 复制代码

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() 函数，这个功能可以帮助我们实现模块的按需加载。

javascript 复制代码

// 使用 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，这在某些场景下可以提高性能。

javascript 复制代码

const eagerModules = import.meta.glob('/src/views/DynamicComponents/*.vue', {eager: true})

for (const path in modules) {
  console.log(modules[path]); // 直接访问模块
}

【注意】同步加载 - 所有模块打包在一起。

2.3 指定导入内容

若是只想要导入模块中的部分内容，那么可以利用 import 选择，其允许我们指定导入模块的导出内容。

javascript 复制代码

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 引入。

javascript 复制代码

// 作为 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 项目中实现动态路由、懒加载组件等功能。