自动导入模块 webpack--require.context、vite--import.meta.glob

最新推荐文章于 2025-06-25 15:03:26 发布

原创最新推荐文章于 2025-06-25 15:03:26 发布 · 2.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端

本文介绍了Webpack中require.context()的使用方法及Vite中import.meta.glob的功能特性。包括如何批量导入文件、支持的语法选项及其转换后的代码形式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack--require.context

你还可以通过 require.context() 函数来创建自己的 context。

可以给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录，以及一个匹配文件的正则表达式。

Webpack 会在构建中解析代码中的 require.context() 。

语法如下：

require.context(
  directory,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/),
  (mode = 'sync')
);

示例

// context 函数会返回一个导入函数 importFn
// 它有一个属性 keys() 获取所有的文件路径
const importFn = require.context('./', false, /\.vue$/)
importFn.keys().forEach(item => {
    // 注意: 这里需要 .default才可以找到路径const com = importFn(item).default
    app.component(com.name, com)
})

参考链接

https://webpack.docschina.org/guides/dependency-management/#requirecontext

vite--import.meta.glob

import.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',
}

// 使用:
Object.keys(modules).forEach(url => {
   constmodule = modules[url].defaultconst name = url.split('/').pop().replace(/\.js|\.ts/,'');
})

{ 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'),
}