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 会在命令行进行提示，建议按提示手动修改。修改后可以反复运行上述命令进行检查。

在这里插入图片描述

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

在这里插入图片描述

一顿百度，到github社区去查问题竟然还有一样的issue。说是webpack打包的问题，研究了半天的webpack，实在找不到bug。就要放弃时，内心有个声音，再来一次。于是仔细看报错信息，不就是找不到这个模块嘛。那手动安装个呗。一顿操作，再回顾工具给出的信息，发现它下面有一行黄色的提示

在这里插入图片描述

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

在这里插入图片描述

Checking passed！
启动项目，完美运行~

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