import.meta.glob / globEager 是vite 根据 fast-glob二次封装的全局引入方法

glob

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

** 子集任意层级路径的文件

* src/下第一层的任意文件

// 导出 ./src 下所有的js和vue文件
const modules = import.meta.glob('./src/*.(js|vue)');

modules对象的真实结构

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

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/**" 代替。

方法类型

interface GlobOptions {
  as?: string
  /**
   * @deprecated
   */
  assert?: {
    type: string
  }
}

interface ImportMeta {
  /* ....other */

  glob<Module = { [key: string]: any }>(
    pattern: string,
    options?: GlobOptions
  ): Record<string, () => Promise<Module>>

  globEager<Module = { [key: string]: any }>(
    pattern: string,
    options?: GlobOptions
  ): Record<string, Module>
}

均接收两个参数

pattern: 文件路径匹配正则

options:额外的配置参数

参考文档

vite文档:https://cn.vitejs.dev/guide/features.html#glob-import

fast-glob:https://github.com/mrmlnc/fast-glob#pattern-syntax

发表回复

您的电子邮箱地址不会被公开。