import.meta.glob 批量导入模块用法指南

最近在学习 Vite 时发现一个超级实用的功能——import.meta.glob，它能让模块导入变得像查电话簿一样简单。作为刚入坑的前端小白，我把摸索过程整理成这份指南，用最直白的方式帮你快速上手。

1. 什么是 import.meta.glob？

想象你有个装满照片的文件夹，传统方式需要手动记录每张照片路径才能查看。而 import.meta.glob 就像给文件夹装了扫描仪，自动生成所有照片的索引清单。它是 Vite 提供的特殊语法，用于批量导入匹配特定规则的模块。

2. 基础使用三步走

1. 准备测试文件：创建 /src/utils 文件夹，里面放几个工具文件如 add.js、multiply.js
2. 编写导入语句：在入口文件使用 const modules = import.meta.glob('./utils/*.js')
3. 查看运行结果：打印 modules 会得到键值对对象，键是文件路径，值是动态导入函数

3. 实际应用场景

• 自动注册全局组件：扫描 components 目录批量注册 Vue 组件
• 按需加载路由：根据 pages 目录结构动态生成路由配置
• 多语言支持：遍历 locales 文件夹加载所有语言包

4. 新手常见疑问解答

• 文件路径怎么写：支持 * 通配符和 ** 递归匹配，比如 ./features/**/handler.js
• 和 require.context 区别：这是 Vite 专属的现代语法，不需要 webpack 环境
• 动态导入时机：返回的是异步函数，需要用 await 或 .then() 获取模块内容

5. 进阶技巧

试试 import.meta.globEager 可以立即导入所有模块（适合已知必要的依赖），或者用 { eager: true } 参数达到同样效果。还可以结合 Object.entries() 遍历处理所有模块。