AntD3与AntD4组件混用解决方案

开端

这周，产品提了个需求，其中包含一个多选的级联选择框，还给我截了个图，（信心满满）说：“我们项目都是用AntD组件，直接用这个组件就成，还不用额外开发。省事儿”。

然而，她不知道的是，我们用的AntD3，截图的是AntD4，而AntD3版本是有级联但是没多选的。

此时，我计上心来，npm使用别名同时安装两个版本，直接用不就成事儿了吗！

解决方案

第一步：使用别名同时安装 3 / 4 两个版本

AntD3正常安装：

npm install antd@3.26.19

AntD4别名安装：

npm install antd4@npm:antd@4.19.5

业务代码中使用：

import { Input, Select } from 'antd'
import { Cascader } from 'antd4' 

第二步：使用pnpm代替npm/yarn

同时安装两个版本后，遇到了第一个问题，Webpack打包出错了，AntD3和AntD4用了相同的依赖，但大版本不同，而npm平铺式的依赖安装，让这同名不同版本的依赖更加混乱了。那么有没有一种从天而降的掌法，可以让二级依赖互相隔离呢？

当然是有的，这个掌法就是_pnpm_

此处贴一个pnpm官网的pnpm与npm对比：pnpm.io/zh/pnpm-vs-…

于是，项目使用pnpm代替了npm，解决二级依赖混乱的问题。

第三步：引入组件样式

果然，开发从来没有一帆风顺。

此时，遇到了第二个问题，AntD4组件样式没有引入，而全局引antd4/dist/antd.css的话显然不合适。

很不凑巧的，我们项目本地开发用的Vite，线上打包用的Webpack。

又是一套组合拳：

1. 针对Webpack：在babel插件里额外写一条babel-plugin-import配置

plugins: [
    // 引入AntD3样式
    [
      'import',
      {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
      },
    ],
    // 引入AntD4样式
    [
      'import',
      {
        libraryName: 'antd4',
        libraryDirectory: 'es',
        style: true,
      },