项目中如何同时配置antd3.0和antd4.0？

原创

我不是药神 2022-08-22 22:15:32 ©著作权

文章标签 css 不同版本 javascript 文章分类 JavaScript 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者我不是药神的原创作品，请联系作者获取转载授权，否则将追究法律责任

一个项目中，一般都只会设置一个ui组件库。要是你的项目也在使用antd的话，你一定只能使用一个版本。可大家想过没有，要是同时使用两个不同版本，在自己项目里的话，你要怎么做?

价值

首先要问，我们做这件事的价值是什么？如果没有好处，为何我们要这么做? 或者什么场景下，让我们有了这种需求呢？
这里我们要肯定的是，一个项目只引用一个组件库，是非常正确的。因为毕竟功能相似，能力相同的组件，我们没有必要搞两个在项目里。但是实际生产生活中，我们从不是理想的人或者事。这其中会夹杂着个人观点，和看法。例如：组件升级后好用了、不好用了的论调，层出不穷，甚至无法统一。既然我们开发做产品给用户，当用户群体涵盖了两种观点时候，我们就无法不听从，不妥协。这时候成年人我都要，就成了不二法门。

思路

第一步：之前🈶️写过一篇单独引用antd组件的文章，其中就介绍说，先通过npm install 另外版本的antd。具体操作过程可参考之前的文章。这也就是第一步安装两个版本antd。
第二步：安装完组件后，我们在通过import 引入对应库样式，或者通过webpack plugin动态引入css、less文件。
第三步：通过上两部，已经成功的将两个组件库应用到项目里了，但是由于antd 的 class name相同，这将造成组件样式和功能上相互影响。所以最关键的一步来了，样式分离。这里有个小技巧，那就是利用antd提供的modifyVars变量修改@ant-prefix: "antd-version";注意要替换的使用less引入。不需要修改class name的则直接使用css引入即可。这样两个样式隔离开了。

实现

第一步，可参考之前文章这里不赘述了。
第二步，如下所示：

 "extraBabelPlugins": [
        [
            "import",
            { 
                "libraryName": "antd",
                "libraryDirectory": "es",
                "style": true   //要替换class name的用true 否则修改成css
            }
        ],
        "@babel/plugin-syntax-dynamic-import"
    ],

第三步，如下所示：

{
      test:  /\.less$/,
      include: 'antd',
      use: getStyleLoaders({
        importLoaders: 1,
        sourceMap: isProd
          ? shouldUseSourceMap
          : isEnvDevelopment,
      }, 'less-loader', {
        lessOptions: {
          modifyVars: modifyVars, //核心代码
          javascriptEnabled: true
        }
      })
}