项目中Antd3与Antd4共存

本文适合使用Antd Design开发项目的小伙伴阅读。

欢迎关注前端早茶，与广东靓仔携手共同进阶～

作者：广东靓仔

一、背景 某天夜里，有位靓仔找到了广东靓仔，"悄悄的"问了个技术问题：antd 3版本和4版本如何共存？没过多久，这位靓仔找到的解决方案~广东靓仔回忆起之前有位同事之前也遇到这个问题，后来同事选择了重构。重构确实是最稳的方案，保证项目稳健性的同时又避开了很多未知的坑。但是重构要花费更多的时间精力成本，因此还是要因项目组而异啦。 旧项目想使用antd新版本组件的API，但又不想重构，相信也有不少小伙伴有过这想法。 下面我们来具体展开讲讲二、具体的解决方案1. 安装 安装antd4版本的时候设置下别名，具体代码如下：

npminstallantd-v4@npm:antd@4.18.7

然后在package.json可以看到如下的依赖：2.配置less-loaderwebpack配置less-loader

test:/\.less$/,include:[/node_modules[\\|\/]antd-v4/],use:[{"cache-loader","style-loader",}{loader:"css-loader",options:{importLoaders:1}},{loader:"less-loader",options:{javascriptEnabled:true,modifyVars:{"@ant-prefix":"ant-v4","@primary-color":"rgba(224,61,62,1)",//全局主色"@link-color":"rgba(224,61,62,1)"}}}]

3.设置prefixClsConfigProvider设置prefixCls

4.设置语言地址

importlocalefrom"antd-v4/lib/locale/zh_CN"

然后就可以在antd3的老项目里面使用antd4了~ 下面我们来梳理下这个less-loader的配置，有兴趣可以继续阅读。三、webpack配置less-loader说明 在上面我们添加了打包LESS的规则，我们来梳理下less-loader的配置：include: [/node_modules[\\|\/]antd-v4/],这里是指定node_modules路径下的antd-v4文件需要经过 loader 处理use从上到下使用了cache-loader、 style-loader、css-loader、 less-loadercache-loader：在一些性能开销较大的 loader 之前添加此 loader,以将结果缓存到磁盘里style-loader：将打包后的css代码