前言

前不久接手过一个历史悠久的项(shi)目(shan)，技术栈之简单(凌乱)令我潸然泪下：你甚至能够在一个我的项目里应用前端三大框架(Angular1, Vue, React)。

三份的代码，本应该给我带来更多的高兴，然而为什么会变成这样呢?

鉴于接到的是一个全新的需要，于是我又双叒叕引入了Ant Design Pro V4全家桶(第四份的高兴)。Hooks和Ant Design V4的搭配，确实用着很香，尤其是Form表单的重写，大大提高了开发效率。于是趁着闲暇工夫，我决定把一个本人负责的Ant Design Pro V2我的项目也降级到V4版本。

特此记录下降级过程。

UMI3降级

我过后应用的是ant-design-pro 2.2.0 脚手架 生成的前端我的项目(JS版，非TS版)，应用的是umi@2和antd@3。因而，首先要把UMI降级到最新的V3版本。

参考官网文档:

  1. 《疾速降级到 umi@3》
  2. 《降级 antd pro 我的项目到 umi@3》

a. 删除package.json里的dva和umi-plugin结尾的插件，改成"umi": "^3.0.0" 和"@umijs/preset-react": "^1.2.2"

其中@umijs/preset-react曾经蕴含了之前的umi-plugin插件

{  "dependencies": {-   "dva": "^2.6.0-beta.16",  },  "devDependencies": {-   "umi": "^2.13.0",-   "umi-types": "^0.5.9"-   "umi-plugin-react": "^1.14.10",-   "umi-plugin-ga": "^1.1.3",-   "umi-plugin-pro": "^1.0.2",-   "umi-plugin-antd-icon-config": "^1.0.2",-   "umi-plugin-antd-theme": "^1.0.1",-   "umi-plugin-pro-block": "^1.3.2",+   "umi": "^3.0.0",+   "@umijs/preset-react": "^1.2.2"  }}

执行npm install重新安装

实际过程中发现：

须要更新antd@3至最新版：npm i antd@3.26.20

重新安装npm i redux react-redux

b. 批改config/config.js 配置文件

原先是间接导出一个对象:

export default {}

当初改成:

import { defineConfig } from 'umi';export default defineConfig({})

删除废除的属性: plugins 和 disableRedirectHoist

删除devtool的配置，应用默认配置即可

大抵改成如下格局:

import { defineConfig, utils } from 'umi';const { winPath } = utils;export default defineConfig({  // 通过 package.json 主动挂载 umi 插件，不需再次挂载  // plugins: [],  antd: {},  dva: {    hmr: true,  },  locale: {    default: 'zh-CN',    baseNavigator: true,  },  dynamicImport: {    // 无需 level, webpackChunkName 配置    // loadingComponent: './components/PageLoading/index'    loading: '@/components/PageLoading/index',  },  // 临时敞开  pwa: false,  lessLoader: { javascriptEnabled: true },  cssLoader: {    // 这里的 modules 能够承受 getLocalIdent    modules: {      getLocalIdent: (context, localIdentName, localName) => {        if (          context.resourcePath.includes('node_modules') ||          context.resourcePath.includes('ant.design.pro.less') ||          context.resourcePath.includes('global.less')        ) {          return localName;        }        const match = context.resourcePath.match(/src(.*)/);        if (match && match[1]) {          const antdProPath = match[1].replace('.less', '');          const arr = winPath(antdProPath)            .split('/')            .map(a => a.replace(/([A-Z])/g, '-$1'))            .map(a => a.toLowerCase());          return `antd-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');        }        return localName;      },    }  }})

c. 模块导入形式扭转

// 导入形式扭转- import Link from 'umi/link';- import { connect } from 'dva';- import { getLocale, setLocale, formatMessage } from 'umi-plugin-react/locale';+ import {+   Link,+   connect,+   getLocale,+   setLocale,+   formatMessage,+ } from 'umi';// 路由跳转形式扭转- import { router } from 'umi';+ import { history } from 'umi';- router.push()+ history.push()

d. 路由配置批改

umi2中，权限路由是配置Routes属性。在umi3中，则改成了wrappers属性。

批改config/router.config.js

export default [  // app  {    path: '/',    component: '../layouts/BasicLayout',    wrappers: ['../pages/Authorized'], // Routes 变成了 wrappers    routes: [],  },];

e. 重新启动我的项目

npm run start 实践上，我的项目应该可能被umi3启动起来了。

如果依然报错，则自行依据报错起因批改代码即可。

Ant Design Pro 内置组件降级

Ant Design Pro v2脚手架提供的Layout组件，已被抽离成了一个独自的npm包@ant-design/pro-layout。同时官网又封装了几个罕用的组件，不便疾速进行业务开发，详见ProComponents官网。

不过我原我的项目中的Layout组件性能临时够用，思考到代码改变较大，因而临时没有降级该组件。

Ant Design 4 降级

参考官网文档: 《从 v3 到 v4》

a. antd降级到3.x最新版本（后面咱们曾经在降级umi3的过程降级了antd），依照控制台 warning 信息移除/批改相干的 API

b. 降级我的项目 React 16.12.0 以上 npm i react@^16.12.0

从新运行我的项目，查看是否能正确运行

c. 应用命令行工具疾速降级

因为antd4重构了大量的组件，为了兼容已有antd2废除的组件(比方旧版本的Form)，官网提供了@ant-design/compatible这个npm包

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

官网提供了一个cli工具，能够主动转换代码的引入形式。在运行cli前，请先提交你的本地代码批改。

# 进入旧我的项目cd myproject# 通过 npx 间接运行# src 就是前端源代码目录夹npx -p @ant-design/codemod-v4 antd4-codemod src

对于无奈主动批改的局部，codemod 会在命令行进行提醒，倡议按提醒手动批改。批改后能够重复运行上述命令进行查看。

d. 降级antd版本

npm i antd@^4.0.0 @ant-design/icons@^4.0.0 @ant-design/compatible@^1.0.0

装置胜利后，重启我的项目，查看页面成果。

降级后的问题

a. 款式问题

降级后的的历史代码，Form组件援用的是@ant-design/compatible，class类名产生了变动，从ant-form变成了ant-legacy-form。如果你的我的项目里对这部分的款式进行了批改，则须要手动批改类名了。

款式问题只能靠本人一个个页面去排查了。。。

b. API 问题

// 旧版<TextArea autosize={{ minRows: 5 }} />// 新版<TextArea autoSize={{ minRows: 5 }} />

这种api的变动，只能靠人工批改和页面报错来批改了。。。

c. antd4 本身的bug

比方 RangePicker属性defaultPickerValue有效

降级有危险，挖坑需谨慎!

总结

此次降级的过程比我料想的要轻松很多，不过也是在我的项目页面不多(只有20多个页面)，初期底层框架由我搭建(零碎较相熟)的前提下实现的。

前言中我有提到的那个历史遗留的巨石利用，其实曾经在一个奄奄一息，行将不可保护的状态下了。即便我又引入了最新的技术栈，然而若干年后，接手的人员必定会吐槽：Antd pro 4 这版本也太老了吧！

市面上这几年也提出了微前端的概念，相应的微前端框架single-spa，qiankun也应运而生。

看着手里保护的各种技术栈的代码，我想起了一句名言：

世上本没有微前端，吹的人多了，也便成了KPI。老夫写代码都是jQuery一把梭！ ——— 鲁迅