最近整了个 vite 插件 vite-plugin-react-router-pages，解决 react 项目中的约定式路由。
背景
最近在做一个新项目，使用 vite 和 react-router-v6。那么可能会遇到这些问题
<Route path="xxx"和PageRoutes.XXX等会存在一堆样板代码。而且一旦更新，要改动的地方也多。react-router官方的 typescript 支持很弱，仅仅是其 api 的 typescript。但其路由常量等周边使用的时候就很弱。
于是想要搞一个基于文件系统的约定式路由，一开始的设想是这样：
1 基于文件系统的约定式路由
2 页面文件是 index.page.tsx（比 index.tsx 更语义化和兼容点）
3 布局文件是 layout.tsx。
4 样板代码能避免则避免。
5 typescript 友好，最起码体现在页面地址有 typescript 支持。
翻了下插件生态，比较好的是 vite-plugin-pages github.com/hannoeru/vi...，但是但是但是
1 作者以 Vue 为主，其 React 是 experimental 阶段，所以不太敢用。
2 页面组件和布局组件的神奇命名方式，个人认为是冲突的。如 页面组件是 user/index.tsx，布局组件是 user.tsx。这从模块的角度看命名是一个东西，作者却还采用这种方式。
所以真心不敢用。
造轮子
那就自己造轮子吧，貌似不难。
1 了解约定是路由
看下社区是怎么做的
- Ant Design Pro pro.ant.design/zh-CN/docs/...
- UmiJS umijs.org/docs/guides...
- Modern.js modernjs.dev/guides/basi...
貌似没有统一，各有各的约定。 没关系，我们也抄抄作业。
梳理下是
- 约定页面目录
./src/pages - 页面文件定义成
index.page.tsx。有些框架采用index.tsx，个人觉得容易和现有的约定冲突，因为现有就有很多index.tsx，但其可能并不是页面组件。 - 布局组件定义成
layout.tsx。布局组件确定了当前的布局和所有子页面的布局。 - 动态路由定义成
[uuid].tsx。会转换成路径的/:uuid
2 不用插件怎么写
在没有插件的时候代码怎么写，这个得写的清晰。 最后再以此为模板，通过插件生成。
这里就不列具体代码了，梳理下来应该有那么几点
- 通过 import.meta.glob 识别文件
- 特别
react-router以下概念：Dynamic Segments、Layout Routes、index、lazy - 以上信息你可以封装出类似这样的代码 react-pages.tsx
3 了解插件怎么写
官方文档 vite plugin cn.vitejs.dev/guide/api-p...
别人怎么写插件的，看别人源码 github.com/hannoeru/vi...
梳理下是
- 插件的约定
- 通过插件实现虚拟文件
- 通过插件生成类型文件
react-pages.d.ts - 配置 server 监听文件变化，重新生成。
- 插件如何接收配置
4 完善工程化部分
梳理下是
- 提供完善的 README.md
- 提供完善的案例，即 example/react
- 打包，这里使用了
unbuild
5 上成品
代码都在这里了 github.com/liyatang/vi...
最后
目前的实现已经足够覆盖作者的使用场景了，如果你有更多诉求，可 PR 或者联系我。
资料
vite-plugin-pages github.com/hannoeru/vi...
vite plugin 文档 cn.vitejs.dev/guide/api-p...