前端根据目录生成模块化路由routes

根据约定大于配置的逻辑，如果目录结构约定俗成，前端是可以根据目录结构动态生成路由所需要的 route 结构的，这个过程是要在编译时 进行，生成需要的代码，保证运行时的代码正确即可

主流的打包工具都有对应的方法读取文件目录

Webpack: require.context
Vite: import.meta.glob

下面以Vite框架讲解例子，具体的需求就需要更复杂的处理，
先进行约定：

1.单个页面都写在src/page文件夹下面
2. 页面的相关信息都用page.ts定义（类似微信小程序那个页面配置文件），这里是存储路由的meta额外信息
3.页面组件的入口名字都要统一叫 index.tsx
4…

这是目录结构：
在这里插入图片描述
直接进入Vite的入口文件main.tsx，在路由渲染前生成routes 数组，

// mainx.tsx// 1、获取所有的page的相关信息
let pages = import.meta.glob('./page/**/pages.ts', {eager: true, //直接获取导出结果import: 'default' //导出的形式
})// 2、获取路由组件index.tsx的动态导入函数(运行时动态引入组件文件)
let components = import.meta.glob('./page/**/index.tsx')// 3、生成routes数组
const routes = Object.entries(pages).map(([filePath, meta]) => {let RoutePath = filePath.replace('./page', '').replace('/pages.ts', '') || '/'let CompPath = filePath.replace('pages.ts', 'index.tsx')return {path: RoutePath,name: RoutePath.split('/').filter(Boolean).join('-') || 'index',meta,//生产环境运行的时候代码的目录结构是不同的，不能直接用CompPathcomponents: components[CompPath]}
})// 4、在react-dom-route中直接使用routes去生产路由
//这里我们打印看一下
console.log('======routes', routes)