antd4-codemod把antd3.X升级到antd4.9最新版本

项目做了好多年，框架一直用的antd3.X的，一直在3的版本上升级，React也一直用的16.6的版本，所以也不支持react Hook。

最近领导让把所有项目的antd升级都到4.X的版本，方便以后迭代，所以升级研究了一下，有antd4-codemod工具还是很简单的，一个小时搞定。

第一步：

通过 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

全局安装完运行 antd4-codemod src

我这里用的全局npm安装的，安装完运行antd4-codemod src 会把你现在所有组件不支持antd4.0的自动改为支持antd4.0

如果中途报错了，可以根据错误修改，然后再运行antd4-codemod src，反复操作一直提示无错误，如下图。

运行 antd4-codemod src时 可能会有错误，“Sorry that there are still some git changes”，

解决方法：

1.运行git init       

2.在.gitignore里面加入  /*   ，用来忽略所有文件。

这样就可以运行命令了，成功后删除刚才init的 .git文件夹即可。

第二步：

在升级antd和react之前要先下载 npm install @ant-design/compatible -S 和npm install @ant-design/icons -S

此处主要作用是让废弃的组件通过 @ant-design/compatible 保持运行, 这样一般来说你无需手动迁移了。

@ant-design/icons主要是保持antd3.x的图标

注意：从 @ant-design/compatible 引入的老版本 Form 组件，样式类名会从 .ant-form 变成 .ant-legacy-form，如果你对其进行了全局样式修改，也需要相应修改。

第三步：

现在就可以升级antd和react了，

分别安装：

npm install antd@4.9.0 -S

npm install react@16.14.0 -S

npm install react-dom@16.14.0

安装成功后到这就表示你升级成功了。

可以运行npm start启动项目，复制antd4.X中表单From组件的代码试试吧。

 

最近升级发现了一些新的问题，总结一下：

一、Module not found: Can't resolve '@babel/runtime/helpers/createSuper' in '...\@ant-design\react-slick\lib' 下面的track.js 报错，找不到这个createSuper模块，

只要是@babel/runtime下的模块找不到都可以用这个方法解决。

解决方法：

1、升级@babel/runtime模块到7.12.5版本， 命令：npm install @babel/runtime@7.12.5 -save

2、如果项目是用roadhog dev启动的，要把roadhog升级到2.5.0-beta.4，命令：npm install roadhog@2.5.0-beta.4

二、报错Object(…) is not a function，报错路径如果是rc-开头的，例如：node_modules\rc-notification\es\Notice.js 下的import _inherits from '@babel/runtime/helpers/esm/inherits'; 

说明rc-notification下的@babel升级的有问题

解决方法：把node_modules中rc-开头的文件夹下面的node_modules下的@bable文件夹删除即可，统一用根目录下node_modules下的@babel文件，例如：删除node_modules\rc-notification\node_modules下的@babel文件夹

一般出现这个问题，rc-开头的文件夹下都会有这种情况，一起都删除了，运行项目即可