这是第一篇介绍文章，从第二篇开始进入正文哈😁
楔子
多年前入坑React后，在公司里一直用的是Antd Pro这套管理系统，但是在实际使用中总归感觉太过于黑盒，很多东西都无法DIY。尤其是UMI这套框架确实有点笨重，加上pro components又是单独抽出来的，要改就要Fork下来，没法跟上升级。这时就有自己构建一套完全属于自己的后台管理面板的想法。
然而真正让我下定决心的是monorepo之路。
自从后端技术栈从PHP转成Nestjs之后。因为这触到monorepo这种项目结构，感觉比较新颖，然后自己用Lerna搭了个架子，千方百计的使Nestjs+Nextjs+Typescript这套整合运行正常之后就开始整入Antd Pro。这时问题出大发了，各种莫名其妙的关于UMI的问题就出来了。后来索性懒得搞了，就直接用webpack4手搭一个React脚手架(因为CRA是真的慢)，然后基于Pro Components来快速开发。这时坑爹的UMI又来了，Pro Components的布局竟然许多地方依赖UMI，真是大写的服。那么最后的办法自然是直接推导从头来。
中间有那么一段时间放弃了，打算用用Antd Pro就算了。有点题外话，其实吧，隔壁VUE的生态是真好，各种官方统一标准，各种完美的UI库，各种完全无黑盒的后台管理面板等等。然后谁让所在公司用React呢，再加上在写tsx这方面上React确实比vue3更加舒服点，也可能是我个人没深入VUE吧。
直到一年后，发现了Vite，眼前一亮，这个的确是个好东西，于是再次勾起我开发一个全白盒的中后台的想法。
过程
我先拿着vite构建一个测试的React应用，放在最新的monorepo架子下(用pnpm workspace搭建的)，发现竟然可以整合的非常好，然后再测试放在原来的lerna项目下，也没任何问题，真是棒棒哒，立马撸起袖子开干！
可以完全整合进monorepo是我对自己开发的中后台的最低标准,但是此系列只讲后台开发,不讲monorepo
需求和现实步骤如下
- 使用vite生成一个react-ts的应用
- 使用eslint+airbnb规则+prettier+stylelint实现代码规范化
- 使用Antd做主UI库,使用Tailwind编写其它细节样式
- 使用react-router v6 构建一个支持嵌套及配置样的路由
- 使用zustand做一个轻量级的全局状态管理
- 使用swr做数据请求
- 使用localForage构建数据持久化并整合zustand
- 不借助任何第三方库原生实现类似vue的KeepAlive效果
- 使用react-dnd实现多标签页的拖动
- 使用react-spring实现多标签页拖动时滑动等动画效果
- 写一个echarts的包装组件用于数据可视化
- 使用react-loadingg做页面的懒加载和lodding效果
- 实现多种高大上的lodding和骨架屏效果
- 使用react-color实现页面换皮肤
- 使用darkreader暗黑实时切换效果
- 使用iconify+iconfont封装一个可以动静态结合的图标组件
- 使用react-i18next实现国际化
- 使用mockjs构建mock数据
- 使用jest编写并运行测试
- 其它会用到的库有immer,dayjs,clsx,lodash-es,ahooks,react-use等等
目前大致上基本完成,否则也没这篇文章了
问题
在实现过程中，其实遇到的问题不多，无非就那么几个老问题
问题1: localForage基本处于不维护状态
解决办法: 目前找不到更好的替代品,rowdb实在太大,或者后续可能使用纯localstorage
问题2: 使用darkreader做暗黑(也是目前antd pro官方的做法)真的非常丑
解决办法: 后面直接换成arco,这样彻底可以甩掉antd体系里那些umi，不支持暗黑等乱七八糟的问题
问题3: React18了怎么办
解决办法: 在我刚刚差不多做完这个项目(测试，国际化等都没做完),react就发布18正式版,直接崩溃。但是细想想不一定是件坏事，这样我就可以给自己找个重构的理由，不断拥有了18的新特性还切掉了Antd.所以这次项目也没做什么版本，直接扔github上，等后续完全升级到18就发布个正式版
后续
这几天开始就用react18重构项目了,在此正好记录一下重构过程,方便同学们一起学习探讨,另外建了个秋秋群: 「681388837」，用来讨论react的，现在还没人，要加的朋友可以加一下，一起讨论
PS：目前另一个关于Nestjs系列的专栏也会在用空时发布，可以关注一下
