vite中import.meta.glob的具体用法

1、定义路径模式

首先，需要定义一个路径模式，用于匹配需要导入的模块。该模式可以使用 * 或 ** 通配符，也可以使用感叹号 ! 进行反选。例如，以下是一些常见的路径模式：

匹配某个文件夹下的所有 .js 文件：./path/*.js

匹配某个文件夹及其子文件夹下的所有 .vue 文件：./path/**/*.vue

排除某个文件夹下的某个文件：./path/!(*.md)

需要注意的是，路径模式中的通配符和反选符号只能出现在路径的末尾，不能出现在路径的中间或开头。

2、调用 import.meta.glob() 方法

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

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)
  })
}

匹配到的文件默认是懒加载的，通过动态导入实现，并会在构建时分离为独立的 chunk。如果你倾向于直接引入所有的模块（例如依赖于这些模块中的副作用首先被应用），你可以传入 { 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,
}

多个匹配模式

第一个参数可以是一个 glob 数组，例如：

const modules = import.meta.glob(['./dir/*.js', './another/*.js'])