记录第一个 vite 插件 vite-plugin-react-router-pages

最近整了个 vite 插件 vite-plugin-react-router-pages,解决 react 项目中的约定式路由。

背景

最近在做一个新项目,使用 vitereact-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 了解约定是路由

看下社区是怎么做的

貌似没有统一,各有各的约定。 没关系,我们也抄抄作业。

梳理下是

  • 约定页面目录./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...

相关推荐
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码7 小时前
1.
react.js·node.js·angular.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
Misha韩9 小时前
React Native 一些API详解
react native·react.js
小李飞飞砖9 小时前
React Native 组件间通信方式详解
javascript·react native·react.js
小李飞飞砖9 小时前
React Native 状态管理方案全面对比
javascript·react native·react.js
202612 小时前
11. vite打包优化
前端·javascript·vite