import.meta.glob批量引入文件

Glob 导入

Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块：

const modules = import.meta.glob('./src/*.js');

以上将会被转译为下面的样子：

// vite 生成的代码
const modules = {
  './src/foo.js': () => import('./src/foo.js'),
  './src/bar.js': () => import('./src/bar.js')
}

你可以遍历 modules 对象的 key 值来访问相应的模块：

  Object.keys(modules).forEach(url => {
    const li = document.createElement('li');
    ul.appendChild(li);
    const link = document.createElement('a');
    li.appendChild(link);
    const pathname = url.split('/').pop().split('.ts')[0];
    link.href = `#${url}`
    link.innerText = pathname;
    link.addEventListener('click', () => location.hash = url);
  })

匹配到的文件默认是懒加载的，通过动态导入实现，并会在构建时分离为独立的 chunk。

import.meta.globEager

如果你倾向于直接引入所有的模块（例如依赖于这些模块中的副作用首先被应用），你可以使用 import.meta.globEager 代替:

const modules = import.meta.globEager('./src/*.js')

以上会被转译为下面的样子：

// vite 生成的代码
import * as __glob__0_0 from './src/foo.js'
import * as __glob__0_1 from './src/bar.js'
const modules = {
  './src/foo.js': __glob__0_0,
  './src/bar.js': __glob__0_1
}

请注意

• 这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准
• 该 Glob 模式会被当成导入标识符：必须是相对路径（以 ./ 开头）或绝对路径（以 / 开头，相对于项目根目录解析）。
• Glob 匹配是使用 fast-glob 来实现的 —— 阅读它的文档来查阅 支持的 Glob 模式。
• 你还需注意，glob 的导入不接受变量，你应直接传递字符串模式。
• glob 模式不能包含与包裹引号相同的引号字符串（其中包括 '，"，```），例如，如果你想实现 '/Tom\'s files/**' 的效果，请使用 "/Tom's files/**" 代替。

参考链接

glob-import