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

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

Glob 导入注意事项¶

请注意：

• 这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准

• 该 Glob 模式会被当成导入标识符：必须是相对路径（以 ./ 开头）或绝对路径（以 / 开头，相对于项目根目录解析）或一个别名路径（请看 resolve.alias 选项)。

• Glob 匹配是使用 fast-glob 来实现的 —— 阅读它的文档来查阅 支持的 Glob 模式。

• 你还需注意，所有 import.meta.glob 的参数都必须以字面量传入。你 不 可以在其中使用变量或表达式。

• import.meta.globEager 已经弃用，请使用 import.meta.glob('*', { eager: true }) 来代替。

参考链接

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