一、序言

本人虽干开发工作14年之久，但是多半是在后端摸鱼，对前端开发来说只会标准ERP开发的这种web开发框架的组件使用，现在要做一个ant-design-react项目的antd大版本升级，确实搞了很长时间，对MVVM项目这块怎么说呢？又爱又恨，爱是因为这个项目开发起来模式跟后端开发差不多，进行了分层，写react写起来很有感觉，但是恨的就是异常处理，现在公司缺前端，没办法，只能自己硬着头皮上。我查了百度，这块资料特别少，不知道为啥，难道是因为都在用antd4吗？

二、升级步骤

先准备前端项目，我这里拿junx-ep-ui举例，这个是个人开源项目的UI前端，之前是用antd4写的，现在想升级到antd5，先参考官方资料：

1、安装最新版antd

npm install --save antd@5.x

2、兼容旧组件

如果你需要使用 v4 废弃组件如 Comment、PageHeader，请安装 @ant-design/compatible 与 @ant-design/pro-layout 做兼容：

npm install --save @ant-design/compatible@v5-compatible-v4
npm install --save @ant-design/pro-layout

或者

yarn add @ant-design/compatible@v5-compatible-v4
yarn add @ant-design/pro-layout

3、快速升级

这命令具体执行了什么操作自行百度，不过我发现它把那些废弃的引用都注释掉了，升级了一些组件版本

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

4、less调整

针对less,因为弃用 less，采用 CSS-in-JS，更好地支持动态主题。底层使用 @ant-design/cssinjs 
作为解决方案配置文档： https://umijs.org/docs/api/config

官方配置:

const { theme } = require('antd/lib');
const { convertLegacyToken } = require('@ant-design/compatible/lib');

const { defaultAlgorithm, defaultSeed } = theme;

const mapToken = defaultAlgorithm(defaultSeed);
const v4Token = convertLegacyToken(mapToken);

// Webpack Config
module.exports = {
  // ... other config
  loader: 'less-loader',
  options: {
    lessOptions: {
      modifyVars: v4Token,
    },
  },
};

这是我这边的项目上config.js中对应的调整：

再执行下面的命令：

yarn add less
yarn add less-loader

5、问题处理

启动项目时候，依然报错

把config.js中的antd改成false：

好像pro兼容性有点问题，再执行下面这句：

yarn add @ant-design/pro-components

再启动项目的时候只留下下面这点异常了

因为dynamicImport: @ant-design/pro-layout/es/PageLoading 路径变更为@ant-design/pro-layout/es/components/PageLoading，所以调整config.js中的配置：

到这里，再启动项目，就只剩下一个异常了