項目中如何同時配置antd3.0和antd4.0？

一個項目中，一般都隻會設定一個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
        }
      })
}
           

結束語