antdv3 升级 v4，解决codemod死循环问题

一、方案一：手动修改组件引用、按照 antdv4 的方式挨个升级

1. 该方案需要统计所有 antd 组件
2. 直接升级成 antd4.x，react 16.9+ （因为 antd 部分组件用 hook 进行了重写）
3. 查看 v3 和 v4 重构的组件替换方案

从 v3 到 v4 - Ant Design

4. 以此手动替换，（工作量繁杂，bug 率超高）
5. 难点是Form组件的重构和大量Icon 的引入方式

基本不考虑！！！！要死人了

二、方案二：使用codemod cli 工具 @ant-design/codemod-v4 首推！！！

1. node 版本 14.21.3
2. 如果上述命令执行失败，乱码死循环（或者编辑器卡死强制退出），如下图

3. 问题排查
   @ant-design/codemod-v4包的依赖包 colors 库存在循环引用问题
   github.com/Marak/color…

4. 问题解决

• cd 到全局@ant-design/codemod-v4的安装目录
• 当前 node 版本的.nvm的隐藏文件 .nvm/versions/node/v14.21.3/lib/node_modules/@ant-design/codemod-v4
• 该目录下安装 npm i colors@1.4.0

5. 重新运行antd4-codemod src
6. 安装

npm install --save @ant-design/compatible@v4-compatible-v3

npm install --save @ant-design/icons

三、方案三（可作为方案二的补充）：手动引入 @ant-design/compatible@v4-compatible-v3工具，挨个调试

- import { Form, Input, Button, Mention } from 'antd';
+ import { Form, Mention } from '@ant-design/compatible';
+ import '@ant-design/compatible/assets/index.css';
+ import { Input, Button } from 'antd';

  ReactDOM.render(
    <>
      <Form>
        {getFieldDecorator('username')(<Input />)}
        <Button>Submit</Button>
      </Form>
      <Mention
        style={{ width: '100%' }}
        onChange={onChange}
        defaultValue={toContentState('@afc163')}
        defaultSuggestions={['afc163', 'benjycui']}
        onSelect={onSelect}
      />
    </>
  );