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

芝芝葡萄2024-07-15 9:50

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

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

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

下面以Vite框架讲解例子，具体的需求就需要更复杂的处理，

先进行约定：

1.单个页面都写在src/page文件夹下面

页面的相关信息都用page.ts定义（类似微信小程序那个页面配置文件），这里是存储路由的meta额外信息

3.页面组件的入口名字都要统一叫 index.tsx

4...

这是目录结构：

直接进入Vite的入口文件main.tsx，在路由渲染前生成routes 数组，

ts 复制代码

// 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,
    //生产环境运行的时候代码的目录结构是不同的，不能直接用CompPath
    components: components[CompPath]
  }
})

// 4、在react-dom-route中直接使用routes去生产路由
//这里我们打印看一下
console.log('======routes', routes)

可以看到结果是正确的，果然生成了要的数组，如果有特别的就在增加一下代码满足需求