?背景

我具體的做法簡單粗暴，直接 yarn install。

七臺河網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),七臺河網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為七臺河1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務(wù)好的七臺河做網(wǎng)站的公司定做！

問題

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

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

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

分析問題

我們項目依賴 antd 的版本是 3.2.2，另外一個庫 json-schema-editor-visual 依賴于 ntd@^3.1.6。

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

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

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

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

圖示如下所示：

如何破局

使用 yarn import。

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

在執(zhí)行這個時候，還發(fā)現(xiàn)了一個報錯。

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

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

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

思考與總結(jié)

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

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

標(biāo)題名稱：記錄一次切換包管理器引發(fā)的血案
網(wǎng)址分享：http://uogjgqi.cn/article/cceceps.html