项目中Antd3与Antd4共存-技术圈

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

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

作者：广东靓仔

一、背景

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