前端工程化 -- Ant Design升级记录

1,134 阅读3分钟

由于业务发展迅速,目前项目中使用的AntD 4.0.2(发布于一年前)已经不能够满足日常的开发需要,因此最近项目组决定升到比较新的版本,因为一年来AntD不断更新,增加了很多新的特性。很荣幸的,这项工作由我来负责。

升级前

首先查阅AntD的官网,AntD在更新日志中提到,采用的是 Semantic Versioning 2.0.0 语义化版本规范,简单来说就是版本号分三位

  • 第一位是主版本号,如果要升级主版本号,需要升级其他依赖(如react),需要修改很多语法,需要学习新的版本带来的新特性并且对现有项目进行改造,工作量非常大

  • 第二位是次版本号,一般而言次版本号的升级会简单一些,因为次版本发布是向下兼容的,也就是说理论上升级次版本后依然能够支持项目运行,当然也可能会出现意外

  • 第三位就是修订版本号,一般而言是修复bug,修订版本号的升级相对而言会比较频繁,成本也最低

package.json里面的~4.0.2的意思就是说可以匹配4.0.X版本,也就是说可以升级修订版本号。

而^4.0.2则意味着可以匹配4.X.Y版本,也就是说可以升级次版本号。

既然AntD说4.13.0是可以兼容4.0.2的,那么理论上可以肆无忌惮的升级了,然而出于稳妥起见,我先是本地拷贝了一份工程代码,然后先尝试本地升级AntD到4.13.0(package.json改成4.13.0然后npm install),结果遇到了报错

Compile error - Can't resolve @babel/runtime/helpers/esm/createSuper

然后根据github上AntD的issue(github.com/ant-design/…

升级后

技术需求其实某种程度上比业务需求影响更大,因为业务代码是自己写的,比依赖库更可控,因此升级后需要充分的测试来保证依赖升级不会引入bug。

  1. 分析AntD的更新日志,分析其中可能造成影响的改动。一般而言,修复bug以及新特性的发布不会对旧代码造成影响,因此主要关注已有特性的修改以及优化,还有少部分功能的减少。
  2. 分析项目中对AntD的依赖,我们的组件分基础组件和业务组件,两种组件都有引用AntD,但是业务组件的错更容易被发现,基本上打开页面能够正常运行的即可。而业务组件则需要更完善的测试,我们的项目中重点用到的组件是form
  3. 整理工程中相对复杂的功能,理论上只要复杂功能能正常运行,升级就没有引入问题。

综上所述,最后划给测试同事的测试范围是项目中一个最复杂的功能,其中包含了我们重度封装form的组件。然后一些很常规的列表页、详情页则由我来自测,自测主要是与UAT环境对比,确认已有功能和页面不受到影响