一、背景
某天夜里，有位靓仔找到了广东靓仔，"悄悄的"问了个技术问题：antd 3版本和4版本如何共存？
没过多久，这位靓仔找到的解决方案~
广东靓仔回忆起之前有位同事之前也遇到这个问题，后来同事选择了重构。重构确实是最稳的方案，保证项目稳健性的同时又避开了很多未知的坑。但是重构要花费更多的时间精力成本，因此还是要因项目组而异啦。
旧项目想使用antd新版本组件的API，但又不想重构，相信也有不少小伙伴有过这想法。
下面我们来具体展开讲讲
二、具体的解决方案
1. 安装
安装antd4版本的时候设置下别名，具体代码如下：
npm install antd-v4@npm:antd@4.18.7
然后在package.json可以看到如下的依赖：
2.配置less-loader
webpack配置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.设置prefixCls
ConfigProvider设置prefixCls
<ConfigProvider locale={zhCN} prefixCls="ant-v4">
4.设置语言地址
import locale from '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-loader
cache-loader：在一些性能开销较大的 loader 之前添加此 loader,以将结果缓存到磁盘里
style-loader：将打包后的css代码<style>标签形式添加到页面头部
css-loader：用于加载css文件，importLoaders 为1（postcss-loader）
less-loader：自动将 less 转换为 CSS
在less-loader这里有个比较细的点，就是modifyVars，可以更改less 中的变量
四、最后
在我们评估某项技术需求的时候，需要结合项目组来综合考虑。有些时候技术上的升级，带来的效益如果颇微，那是否升级就有待商榷了。
