CRA4.X升级到5.X

·  阅读 298
CRA4.X升级到5.X

历史背景

由于业务不断开发代码量越来越多,启动项目的时候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. 此时启动项目的时候会报错信息如下

image2022-1-10_16-52-51.png 2. 这时我发现是我们私有包出现的这个问题,然后对私有项目进行处理 这个我们私有包package.json升级前后对比

  • 升级之前如下图

image2022-1-10_18-13-3.png

  • 升级之后

image2022-1-10_18-16-34.png

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

image2022-1-11_16-16-56.png

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

总结

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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改