历史背景

由于业务不断开发代码量越来越多，启动项目的时候ESlint以及babel-loader需要耗费大量时间，导致每次启动项目的速度越来越慢，每次启动时间大约耗时6min左右，极大地影响开发效率。直到12月份框架5.x版本发布我们发现其中构建工具webpack从4升级到了5，并且在编译速度也有了改善。官方的升级刚好满足了我们的诉求，这个也是我们升级框架的重要原因。

CRA5.0.0 Highlights

1. webpack 5
2. Jest 27
3. ESLint 8 
4. PostCSS 8 
5. Fast Refresh 改进和 bug 修复
6. 支持 Tailwind
7. 改进的包管理器检测 
8. 解除了所有的依赖关系，以便与其他工具更好地兼容 
9. 不再支持 Node 10 和 12

升级方案

升级步骤

1. 首先npm install react-script@5.0.0 --save-dev
2. 安装之后启动项目会提示babel-loader版本太低此时我们升级babel-loader
3. npm install babel-loader@8.2.3 --save-dev
4. 之后升级手动修改eslint-config-tantan版本为0.0.16版本（将版本锁死防止版本不同带来的差异）
5. 安装成功

升级碰到的问题

1. 此时启动项目的时候会报错信息如下

2. 这时我发现是我们私有包出现的这个问题，然后对私有项目进行处理 这个我们私有包package.json升级前后对比

• 升级之前如下图

• 升级之后

3. 升级之后页面有些ESlint的语法检查错误，我们再次更项目的配置信息。禁用掉这些ESlint。
4. 刚开始调试的时候通过npm link方式对包调试，但是在调试过程中总是提示如下图

5. 提示本地的node_module和我们私有库中的包有冲突，查阅相关资料也没有明显的解决方案。最后我发布一版测试包惊奇的发现没有错误了。
6. 至此项目升级成功

总结

个人认为可能是因为5.x版本刚发布，这些问题日后官方会修复。如果不能通过npm link方式调试包的话感觉对开发者来说是很费力的。