antd v3升级v4过程全记录——比你想象更简单!

antd v4版本出来有一段时间了,今天打算升个级。
参考官方文档升级说明

1.升级准备

  • 先升级到 3.x 的最新版本,按照控制台 warning 信息移除/修改相关的 API。
  • 升级项目 React 16.12.0 以上
  • 如果你仍在使用 React 15,请参考 React 16 升级文档。
  • 其余 React 16 废弃生命周期 API 请参考 迁移导引。

2.开始升级

可以手动对照上面的列表逐条检查代码进行修改,但是没必要哇~
官方提供了一个 codemod cli 工具 @ant-design/codemod-v4 可以快速升级到到 v4 版本。

在运行 codemod cli 前,务必先提交你的本地代码修改。否则升级不成功

# 通过 npx 直接运行
npx -p @ant-design/codemod-v4 antd4-codemod src

# 或者全局安装
# 使用 npm
npm i -g @ant-design/codemod-v4
# 或者使用 yarn
yarn global add @ant-design/codemod-v4

我采用的是全局安装的方式
安装完成工具后,运行工具。命令如下,src是你需要升级的项目page目录

# 运行
antd4-codemod src

运行完成后,工具已经帮你自动升级完成了,对于无法自动修改的部分,codemod 会在命令行进行提示,建议按提示手动修改。修改后可以反复运行上述命令进行检查。


antd v3升级v4过程全记录——比你想象更简单!_第1张图片
在这里插入图片描述

手动更改提示部分。再次运行命令检查。检查通过。到这里,很开心的启动项目,却发现项目报错了。


antd v3升级v4过程全记录——比你想象更简单!_第2张图片
在这里插入图片描述

一顿百度,到github社区去查问题竟然还有一样的issue。说是webpack打包的问题,研究了半天的webpack,实在找不到bug。就要放弃时,内心有个声音,再来一次。于是仔细看报错信息,不就是找不到这个模块嘛。那手动安装个呗。一顿操作,再回顾工具给出的信息,发现它下面有一行黄色的提示
antd v3升级v4过程全记录——比你想象更简单!_第3张图片
在这里插入图片描述

恍然大悟,确实是需要手动升级和安装依赖。安装完成后,再次运行 antd4-codemod src


antd v3升级v4过程全记录——比你想象更简单!_第4张图片
在这里插入图片描述

Checking passed!
启动项目,完美运行~

不得不感叹:静下心来,很多事情比你想象的要简单。~just code it!

你可能感兴趣的:(antd v3升级v4过程全记录——比你想象更简单!)