历史背景
由于业务不断开发代码量越来越多，启动项目的时候ESlint以及babel-loader需要耗费大量时间，导致每次启动项目的速度越来越慢，每次启动时间大约耗时6min左右，极大地影响开发效率。直到12月份框架5.x版本发布我们发现其中构建工具webpack从4升级到了5，并且在编译速度也有了改善。官方的升级刚好满足了我们的诉求，这个也是我们升级框架的重要原因。
CRA5.0.0 Highlights
- webpack 5
- Jest 27
- ESLint 8
- PostCSS 8
- Fast Refresh 改进和 bug 修复
- 支持 Tailwind
- 改进的包管理器检测
- 解除了所有的依赖关系，以便与其他工具更好地兼容
- 不再支持 Node 10 和 12
升级方案
升级步骤
- 首先npm install react-script@5.0.0 --save-dev
- 安装之后启动项目会提示babel-loader版本太低此时我们升级babel-loader
- npm install babel-loader@8.2.3 --save-dev
- 之后升级手动修改eslint-config-tantan版本为0.0.16版本（将版本锁死防止版本不同带来的差异）
- 安装成功
升级碰到的问题
- 此时启动项目的时候会报错信息如下
2. 这时我发现是我们私有包出现的这个问题，然后对私有项目进行处理
这个我们私有包package.json升级前后对比
- 升级之前如下图
- 升级之后
- 升级之后页面有些ESlint的语法检查错误，我们再次更项目的配置信息。禁用掉这些ESlint。
- 刚开始调试的时候通过npm link方式对包调试，但是在调试过程中总是提示如下图
- 提示本地的node_module和我们私有库中的包有冲突，查阅相关资料也没有明显的解决方案。最后我发布一版测试包惊奇的发现没有错误了。
- 至此项目升级成功
总结
个人认为可能是因为5.x版本刚发布，这些问题日后官方会修复。如果不能通过npm link方式调试包的话感觉对开发者来说是很费力的。
