使用 import.meta.glob 可以批量动态导入模块,它返回一个映射对象,键是匹配的文件路径字符串,值是异步加载函数。通过配置 import、as 和 eager 等选项,你可以控制导入的内容(如默认导出或命名导出)以及加载时机(按需或预加载),从而在构建时生成高效的代码分割。

如何根据文件路径获取对应的模块实例?
调用 import.meta.glob('./modules/*.js') 会返回一个包含所有匹配文件的映射表。每个值都是一个函数,调用该函数即可获取模块的导出内容。这种方式适合需要根据用户输入或运行时条件决定加载哪个模块的场景。

const modules = import.meta.glob('./modules/*.js');
async function loadModule(name) {
const path = `./modules/${name}.js`;
if (modules[path]) {
const mod = await modules[path]();
console.log(mod.default || mod);
} else {
console.error('Module not found');
}
}
loadModule('utils');
如何预加载所有模块以避免首次加载延迟?
设置 eager: true 选项可以让 import.meta.glob 在构建时直接导入所有匹配的模块,而不是返回异步函数。这样在运行时可以直接访问模块实例,消除了异步等待的时间,适用于模块数量较少且需要立即使用的场景。

const modules = import.meta.glob('./modules/*.js', { eager: true });
// 直接访问模块实例
const utils = modules['./modules/utils.js'];
console.log(utils.default || utils); // 同步可用
如果只想要某个模块的特定命名导出怎么办?
可以通过 as 选项指定导入的别名,或者结合解构赋值获取特定的命名导出。例如,使用 { as: 'myUtils' } 可以将默认导出重命名,或者直接导入命名导出如 { named: true }(需配合具体打包器配置)。这允许你更灵活地处理模块接口。
// 假设 ./modules/utils.js 导出 { format, parse }
const modules = import.meta.glob('./modules/*.js', { eager: true });
const utils = modules['./modules/utils.js'];
// 如果模块有命名导出,直接访问
if (utils.format) {
console.log(utils.format('data'));
}
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











