关于前端:Ant-Design-Pro-V2升级到V4-小结

前言

前不久接手过一个历史悠久的项 (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 一把梭！——— 鲁迅