require.context 与 import.meta.glob

require.context 与 import.meta.glob

两者都是根据正则获取目录下一类文件

require.context参数

require.context(directory,useSubdirectories,regExp)

directory:表示检索的目录
useSubdirectories：表示是否检索子文件夹
regExp:匹配文件的正则表达式,一般是文件名

比如，可以用在Vue项目中的路由的加载和vuex中module的加载

let routerList = [];
let routerFileList = require.context('./module', false, /\.js$/);

routerFileList.keys().forEach(key => {
    routerList.push(...routerFileList(key).default);
});

export default [
    ...routerList
]

import.meta.glob

是vite中支持的，但是是懒加载

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

参数

参数1：路径以及文件类型
参数2：配置项
	eager: boolean 是否懒加载，进行 tree-shaking
	import: '' 导入模块中的部分内容
	query: {} 查询
	as: 导入形式

实例

const modules = import.meta.glob('./module/*.ts');
const modulesArr = [];
// 官网介绍
for (const key in modules) {
  modules[key]().then(mod => {
 	modulesArr.push(...mod.default);
  });
}
// 通过await
for (const key in modules) {
  const mod = await modules[key]();
  modulesArr.push(...mod.default);
}

作者：前端墨尘
链接：https://juejin.cn/post/7262580489062547493
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

多个匹配模式

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

注意

在通过await加载的时候，打包项目会报如下错误

原因：ECMAScript 提案 Top-level await 由 Myles Borins 提出，它可以让你在模块的最高层中使用 await 操作符。在这之前，你只能通过在 async 函数或 async generators 中使用 await 操作符。Top-level await 是个新特性，打包不支持此特性。
解决：

 pnpm i vite-plugin-top-level-await -D
 or
 yarn add vite-plugin-top-level-await -D

在vite.config.ts中加入如下插件

import topLevelAwait from 'vite-plugin-top-level-await'

plugins：[
  topLevelAwait({
    promiseExportName: '__tla',
    promiseImportName: (i) => `__tla_${i}`,
  }),
]

对于 jeccg-boot vue3前端来说如下