?背景

我們現(xiàn)在的項(xiàng)目統(tǒng)一用 yarn 進(jìn)行包管理，之前有一個(gè)舊項(xiàng)目之前使用的是 npm 進(jìn)行管理。于是我決定切換一下。

我具體的做法簡(jiǎn)單粗暴，直接 yarn install。

問題

結(jié)果我發(fā)現(xiàn)之前還好好的項(xiàng)目，突然就出現(xiàn)各種問題，其中一個(gè)問題是 ANTD 的圖標(biāo)重復(fù)渲染了，顯示出來(lái)兩個(gè)。

經(jīng)過一輪搜索，我找到一個(gè) ISSUE，看起來(lái)是版本發(fā)生了一些變更。

這...估計(jì)是我切換包管理器導(dǎo)致的。

分析問題

我們項(xiàng)目依賴 antd 的版本是 3.2.2，另外一個(gè)庫(kù) json-schema-editor-visual 依賴于 ntd@^3.1.6。

在 package-lock.json 中，兩個(gè) antd 的版本合成了一個(gè)，最后只安裝了 3.2.2? 的版本。這是因?yàn)?json-schema-editor-visual 中使用了 ^3.1.6，并沒有鎖次版本，所以它直接跟外面的同時(shí)下載一個(gè)版本。

回顧以下基礎(chǔ)知識(shí)，npm 的版本鎖定的規(guī)則如下：

• 符號(hào)^：表示主版本固定的情況下，可更新最新版。例如：vuex: "^3.1.3"，3.1.3及其以上的3.x.x都是滿足的。
• 符號(hào)~：表示次版本固定的情況下，可更新最新版。如：vuex: "~3.1.3"，3.1.3及其以上的3.1.x都是滿足的。
• 無(wú)符號(hào)：無(wú)符號(hào)表示固定版本號(hào)，例如：vuex: "3.1.3"，此時(shí)一定是安裝3.1.3版本。

但是在使用 yarn install 之后，發(fā)現(xiàn) json-schema-editor-visual 還是安裝了一個(gè) antd@3.1.6 的版本，導(dǎo)致了出現(xiàn)版本不一致導(dǎo)致的問題。

圖示如下所示：

如何破局

使用 yarn import。

該命令是 yarn 幫助遷移當(dāng)前所依賴的項(xiàng)目的 package-lock.json，盡可能減少鎖文件和現(xiàn)有依賴樹之間的差異。

在執(zhí)行這個(gè)時(shí)候，還發(fā)現(xiàn)了一個(gè)報(bào)錯(cuò)。

這個(gè)問題，我一直認(rèn)為是 node 版本的問題，結(jié)果切換 node 版本一直沒法解決，最后還是 Google 幫我解決了問題。從這個(gè) issue 中我找到了答案。

最后我手動(dòng)修改了 package-lock.json 中的 upath 的版本為 ^1.0.5。

執(zhí)行 yarn import。終于成功了，淚目。

思考與總結(jié)

雖然上面只提到了 antd 的版本不一致導(dǎo)致的問題，實(shí)際上還有其他的問題也是由于版本不一致導(dǎo)致的。所以我們?cè)谇袚Q包管理的時(shí)候，盡可能的保持包版本一致。

一般可以使用官方提供的命令，比如 yarn 的 yarn import?，還有 pnpm 提供的，pnpm import 來(lái)處理是最恰當(dāng)?shù)摹?/p>