浅谈 import.meta.glob()

import.meta.glob() 不是 ECMAScript（ES）标准的一部分，它是由 Vite 等构建工具引入的特性。因此，无法归属于某个特定的 ES 版本

import.meta.glob() 是构建工具（如 Vite）特有的功能，而非原生的 JavaScript 功能。一般用于动态导入模块，这个 API 可以帮助我们批量引入文件，比如导入一个目录下的所有文件，而不再需要逐个手动引入，在开发中如果遇到处理多个模块或者动态加载资源的时候非常好用

基本语法

const modules = import.meta.glob('./path/to/files/*.js')

返回值

import.meta.glob() 返回一个对象（或 Promise 对象），其键是匹配到的文件路径，值是一个导入该模块的函数。可以通过以下方式遍历并使用这些模块：

const modules = import.meta.glob('./path/to/files/*.js');

for (const path in modules) {
  modules[path]().then((module) => {
    // 使用导入的模块
    console.log(module);
  });
}

常见使用场景

• 动态路由：可以根据目录结构自动生成路由配置。
• 多语言支持：动态导入不同语言的 JSON 文件。
• 批量导入组件：自动导入某个目录下的所有组件文件。

实际案例使用

const pages = import.meta.glob('./pages/**/!(*.test.[jt]sx*.([jt]sx))')

• 解读：
  • ./pages: 匹配的文件路径起始部分
  • /**: 表示可以匹配任意多层的子级目录
  • /!(*.test.[jt]sx): 表示排除以 .test.jsx / .test.tsx 结尾的测试文件
  • .([jt]sx): 表示匹配.jsx / .tsx 结尾的文件