npm包的更新說明，你還敢不看嗎
npm包的更新說明，你還敢不看嗎
前言
平時工作少不了依賴一些第三方的npm包，站在各位大牛的肩膀上來更好的寫bug，此外還可以學習各位大佬們的各種設計思路和優雅實現。不過npm包雖好，但使用之前也要多加甄別，特別是相同包的不同版本之間的差別，可能一不小心，原本用的飛起的輪子就會讓我們笑不出來。下面用兩次慘痛的線上問題來給大家提個醒。
版本依賴符號
在描述問題之前，先談一下npm的包管理控制。
假設我們依賴一個npm包 a 常見的依賴符號有下面這麼幾種
{
"dependencies": {
"a":"5.6.1",
"a":">=5.6.1",
"a":">5.6.1",
"a":"<=5.6.1",
"a":"<5.6.1",
"a":"~5.6.1",
"a":"^5.6.1"
}
}
我們安裝的npm包依賴有大概下面這麼幾種：
- version 匹配具體版本 例如：a:5.6.1
-
|>=|<|<= version 大於或者小於5.6.1
- ~version 大致相當於當前版本 即 5.6.X 均可以 5.7.1不可以
- ^version 相容版本 相容的是中間的版本，例如5.7.X不包括 6.X.X
ofollow,noindex" target="_blank">詳細區別請檢視
根據上面的安裝標識，npm會預設去拉去符合規定的最新版本。
當我們執行npm i 時 預設的版本依賴關係是"a":"^5.6.1"
npm i a -s //預設安裝的依賴符號是 "a":"^5.6.1"
上面是npm的版本控制規範，有規範也要我們去遵循才可以生效。
開發者版本控制
我們釋出npm包的時候，版本標識是package.json中的version
"version": "0.0.1"
一般來說對於測試版本，都是0.X.X的版本(當然也可以有例外，例如react，最高到0.14.X，突然來了個15.X.X)
成熟版本會從1.X.X開始。
如果有bug或者功能更新的時候，可不能隨便更新，要根據對使用者的影響程度來進行版本更新。
版本更新策略
從我們團隊來說版本更新策略如下：
-
bugfix 原有功能和api無變動
最後一位小版本更新 -
功能更新，新增api等，但是老版本依舊可以使用
中間一位版本更新 -
不相容更新，老版本無法使用
最前面的大版本升級
更復雜一點的可以通過tag來控制不同包具體可以參考https://cnodejs.org/topic/537b47d1cbcc39634983b739 來了解
使用者
結合前面提到的，npm 預設的相容版本安裝，成熟npm包來說，更新策略一般都是考慮使用者的。
會進行比較嚴謹的版本控制，但是我們新專案使用的時候，如果覺得老的包有用，直接npm i 之前可要思量一下，是否進行了打的版本升級。
問題示例
一、query-string 6.x版本不支援低版本
問題描述
上線一個月左右的一個專案，突然接到反饋，某個頁面正常渲染之後，無法選中某個某個模組。
問題定位
- 問題復現
接到反饋之後，立即拿起手邊的手機進行復現，心裡還說這麼明顯的問題竟然發生了，趕緊分分鐘幹掉。
結果發現手邊的手機都無法復現這種情況
- app版本
這時候懷疑是不是app版本問題，試著讓使用者升級下app。
結果發現依舊存在相同問題
- 確認問題機型
這時候詢問發現機型為oppo，沒有仔細去看具體型號。
趕緊拿了個oppo r17測試機，發現依然不存在相關問題。
- 是否網路問題
因為使用的是公司內網，切換到手機4g，依然無法復現。
- 作業系統版本
這時候懷疑是舊版本不相容最新語法，不過我們的js都是經過處理的，應該不會存在，不過還是確認了下使用者作業系統，安卓4.6
- 復現
因為身邊手機版本都較高，無法復現，不復現就很難定位。這時候想起來我司有個雲真機平臺，終於找到了個低版本的oppo，app執行都有點卡的那種。。。上面終於復現了。趕緊去除錯，發現點選的時候報錯:
Uncaught SyntaxError: Use of const in strict mode.
這下確認是es6沒有被轉義的問題了
問題解決
不過這裡還有點疑問，我們專案本身將src下的原始碼進行了處理的。如果說沒有成功，那麼多用到const的地方，應該一開始就報錯。這下就讓我我有點頭疼了。
仔細想了想，可能是第三方npm包沒有經過轉義處理，不過引了那麼多的包，確定還是太難了。webpack打包之後的程式碼生產環境下是壓縮的，簡直不能看。
本地打包
還好webpck4提供了不同的mode方式，可以直接使用 --mode development指定打包，這樣是沒有壓縮過的。
對比發現，const出現在query-string相關邏輯中，直接本地開啟檢視，發現就是其6.X的版本有要求。
:fire: Want to strengthen your core JavaScript skills and master ES6?
I would personally recommend this awesome ES6 course by Wes Bos.
Also check out his Node.js, React, Sublime courses.
可以從其tag中看到，原本使用的5.x是基於es5的 ，18年五月份升級了6.x ，拋棄了支援es5，要求限制環境。
問題原因
原本使用過該模組用來解析和序列化請求引數，所以新專案就直接安裝了該依賴。
安裝的時候，如果沒有指定版本，npm會預設獲取最新版本，所以安裝了6.x的版本。
這時候我們沒有去檢視是否已經有大版本的更新。
但目前大部分新型手機已經支援es6，所以在開發測試和上線的過程中，不會出現該問題。
只有在部分低版本的手機，才會發現。
二、antd upload元件不顯示已上傳圖片
問題描述
同事做的一個專案用到了antd的upload元件，發現測試環境可以顯示後端返回的圖片，但是線上不可以，因為同事休假，本著團結互助，積極接鍋的精神，就拿過來改了。
本地復現
首先拉程式碼到本地，然後本地測試，依然還是沒有問題的。
這樣情況，還是對比下環境依賴。因為這裡比較明顯是upload的問題，所以我們只關注antd就好。
對比測試環境和線上可以看到確實版本有差別：
beta和本地是3.1.4 線上是3.5.4
在本地限定版本之後可以發現問題修復。
問題原因
-
程式碼跟進去可以看到：
3.5.4版本做了個限制：
//圖片字尾名必須為以下其一 (webp|svg|png|gif|jpg|jpeg|bmp)$/.test(extension)
因為我們返回的縮圖地址沒有後綴，所以不會顯示。
-
我們專案裡面的版本依賴的寫法是相容版本寫法：
"antd": "^3.1.4"
因為3.5.4和3.1.4都是符合要求的。
-
antd的版本升級策略是說的過去的畢竟不是大改動，正常情況下圖片無外乎其中之一，這麼小的概略就被我們碰上了。
結束語
吃一塹長一智，所以在使用npm包的時候一定要結合實際情況認真篩選是否適用，對於部分已經使用過的npm包，新專案使用的時候一定要注意是否有大版本變動。
對於問題，首先還是要復現問題，為了更好的復現，最好保證各種版本都一致才能更好的定位。
定位之後就比較好解決了。