vue项目实战系列三十四：vite的require

脚手架webpack迁移vite

(1). 场景:

①. 问题描述:
    a. 接口、路由文件、store模块的自动化引入,实现项目的模块化:
       (1). 在前端工程中,如果遇到从一个文件夹引入很多模块的情况
       (2). 遍历文件夹中的指定文件,然后自动导入
       (3). 不需要每次显式的调用import导入模块
    b. 从require.context转为import.meta.globEager:
       (1). import.meta是一个给JavaScript模块暴露特定上下文的元数据属性的对象

②. 原因:
    a. require.context是webpack的一个api:
       (1). 通过执行require.context函数获取一个特定的上下文
       (2). 主要用来实现自动化导入模块

---

(2). webpack & vite:

①. webpack:
	  require.context('./url', false, /\.ts/)

②. vite:
    import.meta.globEager('./url/*.ts')
在Vite中深度匹配时候 没有true选项 可以目录路径中带上 ** 在进行匹配

---

(3). 场景 - 路由文件自动导入:

// 在router文件内批量引入modules内模块化的文件并处理

// 动态实现加载模块路由
const moduleRouters: Record<string, any> = import.meta.globEager('../views/*/routers.ts')
const routes: RouteRecordRaw[] = [];
Object.keys(moduleRouters).forEach(item => {
  Object.keys(moduleRouters[item]).forEach((key: any) => {
    routes.push(...moduleRouters[item][key]);
  })
})