umi3项目antd4升级为antd5小计

 一、升级原因

         原项目采用scale方案进行屏幕自适应后，许多antd的浮层组件(select、tooltip等)出现的浮层会错位，特别是分页器中页面选择下拉框的定位无法解决(浮层的定位是antd内部计算设置的，其他组件可通过getPopupContainer改变挂载节点勉强搞定)，而antd5已适配这种情况下的浮层定位，故只得升级antd5。

二、升级流程

        结合官方v4-v5升级流程进行，因为该项目是umi3项目，配置稍微不同。

1、为保险起见，删除node_modules和.umi，安装antd5等依赖。

2、使用官方工具快速升级

npx -p @ant-design/codemod-v5 antd5-codemod src

3、为适配antd5，更新react、react-dom及对应的ts版本至18.x。

4、因为antd4使用less，antd5使用css-in-js，在尽量兼容原代码的情况下，使用官方loader进行兼容，在.umirc.ts文件中进行相关设置：

在defineConfig中设置

5、antd4使用moment，antd5使用dayjs，安装dayjs和antd-dayjs-webpack-plugin插件进行对原代码的兼容，此插件在编译时将moment的调用转为dayjs的调用(并不是所有的调用都能替换，有些方法会计算错误或报错，如moment(time, formart)这种方式会计算错误，需改写moment方法的调用或直接使用dayjs的方法)。

import AntdMomentWebpackPlugin from 'antd-dayjs-webpack-plugin';

在defineConfig中设置

chainWebpack(memo, { env, webpack, createCSSRule }) {

    memo.plugin('AntdDayjsWebpackPlugin').use(AntdDayjsWebpackPlugin)

  }

6、其余就是个别组件弃用方法的替换以及样式的调整适配。