glob

2023年05月27日

柏拉文

越努力，越幸运

一、认识

---

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

二、语法

---

2.1 默认导入

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

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

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

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

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

for (const path in modules) {
  modules[path]().then((mod) => {
    console.log(path, mod)
  })
}

2.2 直接导入

如果你倾向于直接引入所有的模块（例如依赖于这些模块中的副作用首先被应用），你可以传入 { eager: true } 作为第二个参数

const modules = import.meta.glob('./dir/*.js', { eager: true })

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

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

2.3 字符串导入

import.meta.glob 都支持以字符串形式导入文件，类似于 以字符串形式导入资源。

const modules = import.meta.glob('./dir/*.js', { as: 'raw', eager: true })

上面的代码会被转换为下面这样:

// code produced by vite（代码由 vite 输出）
const modules = {
  './dir/foo.js': 'export default "foo"\n',
  './dir/bar.js': 'export default "bar"\n',
}

{ as: 'url' } 还支持将资源作为 URL 加载。