Antd升级及兼容：从 v4 到 v5 实战全纪录
内容提要
Antd4升级到Antd5需使用codemod工具替换Moment.js为Dayjs，并处理Less变量兼容性。同时需安装@ant-design/compatible以支持旧组件，确保项目正常运行。
关键要点
-
Antd4升级到Antd5建议使用codemod工具进行快速升级。
-
需要将Moment.js替换为Dayjs，并处理相关方法的修改。
-
安装@ant-design/compatible以支持旧组件，确保项目正常运行。
-
Less变量的兼容性处理需要使用@ant-design/compatible包进行转译。
-
v5的Design Token结构与v4不同，需要使用convertLegacyToken进行兼容处理。
-
可以使用@ant-design/moment-webpack-plugin插件将day.js替换回moment.js。
-
在v5中，样式变量的具体值有所改变，需进行相应调整。
延伸解读
升级过程中的注意事项
在将Antd从v4升级到v5时，使用codemod工具可以显著提高效率，但开发者需注意Moment.js的替换和相关方法的调整。此外，确保安装@ant-design/compatible包以支持旧组件，避免因组件不兼容导致项目运行异常。
Less变量的兼容性处理
Antd v5逐步弃用Less，转向CSS-in-JS设计体系，因此在处理样式时需特别注意Less变量的兼容性。使用convertLegacyToken可以将v5的设计Token转译为v4的Less变量格式，确保旧代码的正常运行。
样式变量的变化
在Antd v5中，样式变量的具体值发生了变化，开发者需要仔细检查并调整相关样式，以确保界面的一致性和美观性。对比v4和v5的变量输出，可以帮助识别需要修改的地方。
延伸问答
如何使用codemod工具将Antd4升级到Antd5？
可以使用命令npx -p @ant-design/codemod-v5 antd5-codemod src快速升级。
在Antd5中如何处理Moment.js的替换？
需要将Moment.js替换为Dayjs，并相应修改相关方法。
为什么需要安装@ant-design/compatible包？
安装@ant-design/compatible包是为了支持旧组件，确保项目正常运行。
Antd5的Design Token结构与v4有什么不同？
v5使用CSS Variables和Design Token动态计算，而v4使用Less变量。
如何处理Antd5中的Less变量兼容性？
需要使用@ant-design/compatible包进行转译，以兼容旧版Less代码。
在Antd5中如何调整样式变量的具体值？
样式变量的具体值在v5中有所改变，需要进行相应调整。
