老项目Antd 3 升级 4 随笔

最新推荐文章于 2023-11-30 11:22:18 发布
最新推荐文章于 2023-11-30 11:22:18 发布
阅读量1.4k 收藏
点赞数
分类专栏： JavaScript笔记 文章标签： javascript typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JavaYao1/article/details/110670835
版权

  1. 升级项目 React 16.12.0 以上。

  2. git提交

  3. npx -p @ant-design/codemod-v4 antd4-codemod src

  4. 改变老项目的引用 Icon 

  5. npm install --save @ant-design/icons ( 下载巨慢,如果icon引用的不多话,通过第4步,跳过此步)

  6. 注意：从 @ant-design/compatible 引入的老版本 Form 组件，样式类名会从 .ant-form 变成 .ant-legacy-form，如果你对其进行了样式覆盖，也需要相应修改。!!!! 很重要

ant-design V3升级V4记录（成功篇）
ime33的博客
01-16 3100
原因：babel版本兼容问题以及.babelrc文件配置，可在下方沿用我的babel相关版本。一是antd是一个开源性生态框架，人家社区一直在更新迭代，如果产品不及时更新，一直在使用不维护的，甚至有问题的框架，后果可想而知。原因：检查style-loader\less-loader\css-loader版本，挨个尝试。这篇博客没有一步步记录升级过程中的错误以及解决办法，所以只罗列的大致的错误项，希望对在升级之路上的你有所帮助。另外在我升级V4时，其实框架已经到了V5了，无奈升级到V5前，必须先升级V4。
webpack5基于React+Antd搭建开发和生产环境
qq_44472790的博客
10-01 856
webpack构建react开发实践
antd v3 升v4
weixin_43915401的博客
12-08 416
react 16.8升级至17.0.1 npm install [email protected] [email protected]升级react 执行发生错误时：npm install @babel/runtime antd 3.X 升级至最新 yarn add antd 升级antd npx -p @ant-design/codemod-v4 antd4-codemod src 安装兼容包 执行发生错误时：npm install --save @ant-design/icons 执行发生错误时：npm i..
antd3升级到antd4（已解决所有报错）
owo_ovo的博客
08-17 3329
react项目将antd3升级到antd4，并解决常见报错
antd从v3升级到v4
qq_49464155的博客
02-18 5147
因为项目需求，需要对antd进行一个升级，下面我简述下我升级的步骤 1. 安装最新版本antd，升级项目 React 16.12.0 以上 2. 若项目中使用了Form表单/Icon组件 安装@ant-design/compatible，然后在之前使用Icon/Form组件的地方使用如下引用方式就可以了，这个只是个兼容性办法，项目可以正常运行，控制台会有警告，等以后有时间了再切换成antd的组件 import { Form, Icon } from '@ant-design/compatible'
antd 3升级4遇到的问题与解决方式
solitude1128的博客
10-07 825
首先把package.json中改为4的版本号，然后删除node_modules后，重新 npm install 下载。1. 引入的LocaleProvider模块在4被废弃，需要修改为ConfigProvider。2. icon变为按需引入了，，只能手动改掉所有引入icon的地方。下载后运行，此时没有bug了，但是可能会报一堆警告，依然不能使用。具体看是什么警告，挨个排查，我遇到的是这些，如下。前情提要：3.26.13 => 4.24.14。此时运行会报一大堆错，不慌张，下载一个模块先。
antd3 升级 antd4+ 引起的bug
最新发布
YangljHjr的博客
11-30 624
注意：在Form.create()的初始底层页面，去掉Form.create()，改用Form.useForm();（2）不用getFieldDecorator了，全部用4的, 改到Form.Item的属性中。（1）getFieldDecorator包含的rules不起作用了。
antd4-codemod把antd3.X升级到antd4.9最新版本
DavidZhao的博客
12-16 3042
项目做了好多年，框架一直用的antd3.X的，一直在3的版本上升级，React也一直用的16.6的版本，所以也不支持react Hook。 最近领导让把所有项目的antd升级都到4.X的版本，方便以后迭代，所以升级研究了一下，有antd4-codemod工具还是很简单的，一个小时搞定。 第一步： 通过 npx 直接运行 npx -p @ant-design/codemod-v4 antd4-codemod src 或者 全局安装 # 使用 npm npm i -g @ant-design/code.
Ant Design 3.x 升级到4.0的过程
m0_49016709的博客
05-30 2511
1、执行npm i -g @ant-design/codemod-v4 全局安装 2、这是代码会有改动，git status 查看代码状态 3、git commit 本地合并 4、antd4-codemod src （会把你现在所有组件不支持antd4.0的自动改为支持antd4.0 如果中途报错了，可以根据错误修改，然后再运行antd4-codemod src，反复操作一直提示无错误） 第一次执行完成如下图 有五处需要手动修改的，按照去修改 5、安装compatible npm i @ant-des
ant-design V3升级V4记录（失败篇）
ime33的博客
01-16 510
1、升级"antd": "^3.26.19", 2、安装迁移工具 cnpmi -g @ant-design/codemod-v4 3、提交变更 4、执行迁移命令antd4-codemod app 5、根据建议升级、安装依赖 6、修改老版本webpack配置 7、
《ANTLR 4权威指南 》一第3章 入门的ANTLR项目
weixin_34066347的博客
05-02 319
本节书摘来自华章出版社《ANTLR 4权威指南 》一书中的第3章，第3.1节，［美］　特恩斯·帕尔（Terence Parr）　著张　博　译，更多章节内容可以访问云栖社区“华章计算机”公众号查看。 第3章 入门的ANTLR项目 作为我们的第一个ANTLR项目，我们会构造一个语法，它是C语言或其继承者Java语法的一个很小的子集。具体来说，我们将识别包裹在...
ant.design从 v3 到 v4
weixin_43837305的博客
03-22 832
项目场景： 项目antdv3已经不能满足日常开发需求，升级v4版本解决问题 描述 系统环境： "antd": "^3.26.3", "react": "^16.12.0", 升级准备： 1、请将react版本升级到 React 16.12.0 以上。 2、请先升级到 3.x 的最新版本。 这里升级到3.26.12（我这边是用的yarn） yarn add [email protected] yarn add antd@3.26.12 升级开始: npx -p @ant-design/codemod-v4 an
23 版本以上的v4包_Ant Design Pro V2升级到V4 小结
weixin_29553791的博客
12-29 791
前言前不久接手过一个历史悠久的项(shi)目(shan)，技术栈之复杂(混乱)令我潸然泪下：你甚至可以在一个项目里使用前端三大框架(Angular1, Vue, React)。 三份的代码，本应该给我带来更多的快乐，但是为什么会变成这样呢?鉴于接到的是一个全新的需求，于是我又双叒叕引入了Ant Design Pro V4全家桶(第四份的快乐)。Hooks和Ant Design V4的搭配，的确用着...
antlr 4新特性总结及与antlr v3的不同
diefen3773的博客
12-09 875
antlr 4新特性总结及与antlr v3的不同 学习曲线低。antlr v4相对于v3，v4更注重于用更接近于自然语言的方式去解析语言。比如运算符优先级，排在最前面的规则优先级最高； 层次更清晰、更易维护。引入访问者、监听器模式，使解析与应用代码分离；新増import功能，lexer、parser可以成为公共组件，増加可复用性； 新算法。改进LL()算法，使用新的Adative L...
antd 3.x和4.x的区别
cathy_39的博客
01-31 1179
antd 3.x和4.x的区别，纯个人做项目总结
Antd3升级Antd4
jun的博客
08-14 3684
删除本地package-lock.json、node_modules yarn install --初始化项目 yarn upgrade antd@3.26.12 --更新antd包到3版的终极版 yarn start --跑下项目，看Ok不 ant3 执行下面命令直接升级项目中的旧代码为新版代码 执行前确认本地代码占存或push到线上了 npx -p @ant-design/codemod-v4 antd4-codemod src 更新 yarn add react --latest
antd v3升级v4过程全记录——比你想象更简单！
weixin_43867717的博客
10-22 3762
antd v4版本出来有一段时间了，今天打算升个级。 参考官方文档升级说明 1.升级准备 先升级到 3.x 的最新版本，按照控制台 warning 信息移除/修改相关的 API。 升级项目 React 16.12.0 以上 如果你仍在使用 React 15，请参考 React 16 升级文档。 其余 React 16 废弃生命周期 API 请参考 迁移导引。 2.开始升级 可以手动对照上面的列表逐条检查代码进行修改，但是没必要哇~ 官方提供了一个 codemod cli 工具 @ant-de
react-antd项目中重新npm  install  导致自动升级antd版本，引发的样式问题
热门推荐
han_calligrapher的博客
07-20 1万+
解决方式： 1.指定安装固定ant版本： npm i antd@2.10.4 —save (在 node_modules同级目录下)    原因： 尽量不要直接用npm install(全局安装)命令，要指定要安装的库，因为package.json中有^符号的都有可能会升级各类库。      图为package.json里面的配置： 2.直接手动修改ant的样式（弊端：以后可能还会出...
AntD3与AntD4组件混用解决方案
发果叁
05-19 5003
开端 这周，产品提了个需求，其中包含一个多选的级联选择框，还给我截了个图，（信心满满）说：“我们项目都是用AntD组件，直接用这个组件就成，还不用额外开发。省事儿”。 然而，她不知道的是，我们用的AntD3，截图的是AntD4，而AntD3版本是有级联但是没多选的。 此时，我计上心来，npm使用别名同时安装两个版本，直接用不就成事儿了吗！ 解决方案 第一步：使用别名同时安装 3 / 4 两个版本 AntD3正常安装： npm install antd@3.26.19 AntD4别名安装： npm inst
codemod-v4：简化antd v4升级的命令行工具
总结而言，codemod-v4通过提供一套自动化脚本，帮助开发者快速且准确地将项目中的antd依赖从版本3升级至版本4，大大减少了手动修改代码的复杂性和潜在的错误风险，是提高开发效率、保证代码质量的重要工具。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值