项目中Antd3与Antd4共存

一、背景

   某天夜里，有位靓仔找到了广东靓仔，"悄悄的"问了个技术问题：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 中的变量

四、最后

   在我们评估某项技术需求的时候，需要结合项目组来综合考虑。有些时候技术上的升级，带来的效益如果颇微，那是否升级就有待商榷了。