Skip to main content

批量引入模块

webpack​

基础使用

语法：

require.context(directory, useSubdirectories, regExp);​

  • directory
  • useSubdirectories
  • regExp
参数描述类型备注
directory要查找的目录的路径string
useSubdirectories是否查找子目录boolean
regExp要匹配文件的正则表达式/*\.vue/
// 查找当前目录下的 modules 文件夹下的所有 js 文件
let modules = require.context('./modules', false, /\.js/)

// 获取查找到的第一个模块
let first = modules.keys()[0]

// 加载对应模块
modules(first) 
vue-router 自动加载当前文件夹所有路径

vite​

语法：

  • import.meta.globEager('./modules/**/*.ts'): Array<module>

使用场景：​

  • 批量引入路由
// vue-router中使用
const modules = import.meta.globEager('./modules/**/*.ts');
const routeList: AppRouteModule[] = [];

// 加入到路由集合中
Object.keys(modules).forEach((key) => {
  const mod = modules[key].default || {};
  const modList = Array.isArray(mod) ? [...mod] : [mod];
  routeModuleList.push(...modList);
});

export routeList
// modules 下的ts路由文件格式
import type { AppRouteModule } from '/@/router/types';
const about: AppRouteModule = {
      path: '/about',
      .../
}
export default