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

相关推荐
带娃的IT创业者2 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost3 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11064 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白4 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学5 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽5 小时前
【初学】调试 MCP Server
前端·mcp
四月_h5 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate5 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
正义的大古6 小时前
OpenLayers地图交互 -- 章节十八:拖拽旋转和缩放交互详解
javascript·vue.js·openlayers
行者..................7 小时前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js