ant design pro升级v4指南(附umi3与antd4升级)

前言

自己在去年用ant design pro 创建了个后台服务的项目，当时创建的时候umi控制台提示是否使用antd 4,当时抱着尝鲜的想法选择了yes,结果项目跑起来之后，功能没有问题，但是打开后台后发现各种提醒你升级或者迁移的warning,类似这样：

看着着实蛋疼，ant design pro 本质上是蚂蚁全家桶，结合了antd和umi的一整套后台项目解决方案，如果要解决这些warning,需要对整个项目进行系统升级(umi 2内部使用的还是antd 3版本的组件，哪怕你业务组件都改了，umi不升级警告还是存在的)。

升级实战

antd design pro 升级

这个升级最简单，根据官方文档的提醒，直接安装最新依赖：

npm i @ant-design/pro-layout --save

然后需要替换BasicLayout文件，这个直接参考官网升级指南即可，这里不赘述。

umi 3 升级

接下来的重点是umi 从2升级到3，官网讲了大致的改动，但是具体的升级细节涉及的不多，这里我将结合官网指南和个人的项目来进行讲解：
首先umi3需要node 10.13以上，这个是前提,其次为了支持umi3的新别名@@需要修改tsconfig.json的配置,在path中增加如下内容：

"paths": {
   
    "@/*": ["./src/*"],
    "@@/*": ["./src/.umi/*"]
}

接下来要修改项目的配置文件config/config.ts, 原先的配置文件:

const plugins: IPlugin[] = [
  [
    'umi-plugin-react',
    {
   
      antd: true,
      dva: {
   
        hmr: true,
      },
      locale: {
   
        // default false
        enable: true,
        // default zh-CN
        default: 'zh-CN',
        // default true, when it is true, will use `navigator.language` overwrite default
        baseNavigator: true,
      },
      dynamicImport: {
   
        loadingComponent: './components/PageLoading/index',
        webpackChunkName