23 版本以上的v4包_Ant Design Pro V2升级到V4 小结
![](/assets/blank.gif)
前言
前不久接手过一个历史悠久的项(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 可以接受 getLocalIdentmodules: {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 变成了 wrappersroutes: [],},
];
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一把梭! — 鲁迅
23 版本以上的v4包_Ant Design Pro V2升级到V4 小结相关推荐
- 7nfs客户端没权限_Ant design pro v4-服务器菜单和路由权限控制
要解决的问题:ant design pro默认情况下,菜单和路由都用配置的方式,在前端的config/config.ts中配置.但是大多数后台系统都需要由后端服务器控制权限. 类似的需求一般包括两点: ...
- ant design pro模板_Ant Design Pro入门教程,安装,运行(V5 Typescript版)
[前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 该套模板是使用了React开发框架作为基础,AntDesig ...
- android v4包自动导入吧,android如何导入v4包的源码
1.我们导入v4包源码却发现没有导入按钮 当我们调用android-support-v4.jar里面的控件的时候(这里以android.support.v4.view.ViewPager举例说明),很 ...
- antdesign 柱状图_ant design pro (十)advanced 图表
一.概述 Ant Design Pro 提供了由设计师精心设计抽象的图表类型,是在 BizCharts 图表库基础上的二次封装,同时提供了业务中常用的图表套件,可以单独使用,也可以组合起来实现复杂的展 ...
- ant design pro模板_Ant Design Pro 学习笔记
学习笔记 摘要介绍 Ant Design Pro 是一个基于Ant Design搭建起来的模板项目.它提供了两个主要布局:BasicLayout.UserLayout,在布局基础上制作了20多个基础页 ...
- ps2020的antlib文件在哪_ant design pro 新增页面
ant design pro 新增页面 2.由于pro版本升级到2.0,所以重新做了一个分享,下面是目录地址 1.在 src/routes/ 下面的任意一个文件夹下面创建一个页面 // 填写如下内容 ...
- ant design pro 加载慢_ant design pro项目打包后页面加载缓慢
用ant design pro框架做的项目,打包之后每一个页面加载的速度都特别慢,在.webpackrc里面配置了ignoreMomentLocale: true, disableDynamicImp ...
- ant design pro模板_ant design pro 当中改变ant design 组件的样式和 数据管理
ant design pro 简介 官网简介 Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续 ...
- ant design 预览图片_Ant Design Pro上传图片
Ant Design Pro上传图片 今天看了下Ant Design Pro上传图片的插件,感觉挺简单,也没有遇到太多问题,分享个大家!顺便记录下. 这里有个坑,主要文件命名的时候不要和保留关键词同名 ...
最新文章
- IIS部署ASP.Net Core 502.5错误和解决
- 互联网金融2.0 这是最好的时代
- 第四届“强网杯”全国网络安全挑战赛_部分WP
- 手工编程:hello world
- 登录界面点击登录后如何延迟提示成功的div的显示时间并跳转
- 用C++实现十进制转二进制【个人思想】
- nginx php image,[Docker]应该把 nginx 和 PHP 放在一个 image 里还是分开?
- 评论家:亚马逊先于苹果达万亿美元市值
- pg_basebackup基础备份多表空间
- 我有十万块,想自己创业,是做电商还是做实体店?
- java中的getnumber怎么用_java安全编码指南之:Number操作详解
- python自学行吗-大家觉得自学python多久能学会?
- 【飞行器】基于matlab多源信息融合算法多旋翼无人机组合导航系统【含Matlab源码 1267期】
- QT 控件动态效果之QPropertyAnimation
- DBMS (数据库管理系统) 是什么
- 生理学_神经系统的功能
- eclipse/Myeclipse注释模板修改
- Ubuntu Linux的虚拟机安装Windows86X虚拟机安装(Ubuntu ISO64Bit)
- 批量解压多个rar压缩包并将解压出来的文件以该压缩包的名称重命名
- Selenium+Python+Pycharm自动化环境搭建具体步骤