import.meta.glob用法详解

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 导入形式¶

import.<wbr/>meta.glob 都支持以字符串形式导入文件，类似于 以字符串形式导入资源。在这里，我们使用了 Import Reflection 语法对导入进行断言：

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

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

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

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

多个匹配模式¶

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

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

反面匹配模式¶

同样也支持反面 glob 匹配模式（以 ! 作为前缀）。若要忽略结果中的一些文件，你可以添加“排除匹配模式”作为第一个参数：

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

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

具名导入¶

也可能你只想要导入模块中的部分内容，那么可以利用 import 选项。

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

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

当与 eager 一同存在时，甚至可以对这些模块进行 tree-shaking。

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

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

设置 import 为 default 可以加载默认导出。

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

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

自定义查询¶

你也可以使用 query 选项来提供对导入的自定义查询，以供其他插件使用。

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

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

Glob 导入注意事项¶

请注意：

• 这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准
• 该 Glob 模式会被当成导入标识符：必须是相对路径（以 ./ 开头）或绝对路径（以 / 开头，相对于项目根目录解析）或一个别名路径（请看 resolve.alias 选项)。
• Glob 匹配是使用 fast-glob 来实现的 —— 阅读它的文档来查阅 支持的 Glob 模式。
• 你还需注意，所有 import.<wbr/>meta.glob 的参数都必须以字面量传入。你 不 可以在其中使用变量或表达式。

动态导入¶

和 glob 导入 类似，Vite 也支持带变量的动态导入。

const module = await import(`./dir/${file}.js`)

注意变量仅代表一层深的文件名。如果 file 是 foo/bar，导入将会失败。对于更进阶的使用详情，你可以使用 glob 导入 功能。

项目中用法

export const registerBomchecklAsyncComponents = app => {
  const modules = import.meta.glob('/src/views/plm/containManagement/bomCheck/*.vue');
  //新添加的地方，详情采用我们自己的详情，新增任务tab
  modules['/bomDetail.vue'] = () =>
    import(
      './../../capp/processManagement/processObjectViewer/OutputLink/components/bomPartsDetail.vue'
    );
  modules['/processTask.vue'] = () =>
    import(
      './../../capp/processManagement/processBom/ProductLibraryList/PartsInfo/ProcessTask/Index.vue'
    );
  for (const path in modules) {
    const result = path.match(/.*\/(.+).vue$/);
    if (result) {
      const name = result[1];
      const component = modules[path];
      app.component(name, defineAsyncComponent(component));
    }
  }
};