渐进式路由自动化生成

简介

在前端开发中，每新建一个业务功能页面，都要在路由配置文件中手动添加一条路由配置，属于机械重复工作

但基于配置式路由开发了很长时间的项目，迁移至约定式路由成本会很高

主流方案：约定式路由

约定式路由即根据文件目录去自动生成路由，在许多框架中都有这种实现，如umi、next.js等

如果要在react或vue项目中自行实现约定式路由，可以用构建工具提供的api如webpack中的require.context、vite中的import.meta.glob去获取页面目录下的所有文件路径，经过一些处理后得到路由配置的内容

但在实际开发中，pages下很多文件是不需要生成对应路由的，如components、utils、assets等文件夹

我想过去写一些约定之外的配置文件，比如在生成路由时通过读json配置来排除这些文件夹，类似tsconfig中的exclude字段 但无法保证这些不需要生成对应路由的文件夹名称可以被穷举，因此通过手动配置去排除的方式也不可行，也违背了“约定大于配置”的原则

next.js针对这种情况的做法是对我们的页面文件目录再添加一些约定：不管文件夹名称是什么，只要里面没有page.js，就说明无需生成对应路由

考虑到我们目前的项目已经基于配置式路由开发了很长时间，迁移至约定式路由成本会很高，因此在不改变配置式路由以及原先项目中routes文件夹结构的前提下，用脚本自动化写入的方式来提高开发效率

使用

推荐直接运行

npx pages-watcher

然后在pages文件夹下新建文件夹即可

注：当前监听的页面文件夹路径是写死的，只适用于特定项目结构，后续考虑添加routes.config.js配置: 大概如下：

{
    pages: "src/pages",
    routes: "src/routes"
}