项目中引入不同版本的ui库（例如antd3和antd4））

Posted 2023-05-18

参考技术A 无论是提升性能，或者是其他什么原因，很多时候在在做业务的时候需要引用到更新版本的ui库，但是之前业务量太庞大，又不能全部升级，只能多版本兼容。例如antd4的虚拟列表，表单等操作，相比于antd3会有很大的性能提升和便捷性，所以这两版本项目都会引用，这个时候该怎么引入呢？如下：

这样两个版本分别取不同的名字，就可以在项目使用啦！

antd v3 升级 v4

参考技术A antd v4 使用hook对组件进行了升级，react项目使用hook的话升级v4会比较好。

antd V4 提供了一个 codemod cli 工具 @ant-design/codemod-v4 以帮助快速升级到 v4 版本。
废弃的组件则通过 @ant-design/compatible 保持运行（从 @ant-design/compatible 引入的老版本 Form 组件，样式类名会从 .ant-form 变成 .ant-legacy-form）如果进行了样式覆盖，需要进行调整。

通过 npx 直接运行
npx -p @ant-design/codemod-v4 antd4-codemod src

或者全局安装
使用 npm
npm i -g @ant-design/codemod-v4
或者使用 yarn
yarn global add @ant-design/codemod-v4

antd4-codemod src
以上升级完成

需要注意组件配色问题，如进行了样式覆盖需要对应处理。