很多人上來就刪除的package-lock.json,還有這麼多你不知道的(深度內容)

點擊上方“藍色字體”,選擇“設爲星標

做積極向上的前端人!

作者:wuwhs
原文:https://segmentfault.com/a/1190000039684460

0. 前言

看完本文,你將從整體瞭解依賴版本鎖定原理,package-lock.json 或 yarn.lock 的重要性。首先要從最近接連出現兩起有關 npm 安裝 package.json 中依賴包,由於依賴包版本更新 bug 造成項目出錯問題說起。

事件一:新版本依賴包本身 bug

項目本地打包正常,但是線上使用 Jenkins 完成 DevOps 交付流水線打包出錯問題。報出如下錯誤:

**17:15:32**  ERROR in ./node_modules/clipboard/dist/clipboard.js
**17:15:32** Module build failed (from ./node_modules/babel-loader/lib/index.js):
**17:15:32** Error: Couldn't find preset "@babel/env" relative to directory "/app/workspace/SIT/node_modules/clipboard"

顯示錯誤原因是 clipboard 插件沒有安裝 @babel/env 預設(preset)。明顯這個是插件問題了,去官方庫 `clipboard`[1] 查看源碼發現該庫依賴包很少,大部分是原生實現。再看 issue 別人有沒有出現同樣的問題,目前來看還沒有人提出。以此推斷可能是插件本身的 "問題" 了。

但是我本地項目打包正常,線上的出錯,可能由於本地版本和線上版本不一致導致(某個小版本出現的 bug)的。通過查看package.json 配置的 clipboard: "^2.0.4",線上實際安裝版本是 2.0.7,而我本地實際安裝版本是 2.0.6因此定位到 2.0.7 出現的 “問題”。

由於是插件本身“問題”,我的臨時解決辦法是鎖定到 2.0.4 版本,也就是 clipboard: "2.0.4",後面加上 package-lock.json

打破沙鍋問到底既然“問題”已經定位到了 2.0.7 版本,進一步通過對比此次版本提交文件內容差異,發現 .babelrc 文件用到的 preset 是 env

2.0.7 版本用的是 @bable/env,將 babel 更新到了 7!

問題基本定位到了,這裏就順便給作者提了一個 `issues`[2]

事件二:依賴包的新版插件 bug

一直正常使用的 braft-editor 優秀的富文本編輯器插件,最近在其他小夥伴電腦或者在我本地電腦重新部署項目,啓動後發現 toHtml() 方法獲取富文本 html 內容總是空!

歷史版本是正常的,猜測可能又是版本更新造成。同樣的,去官方庫 braft\-editor[3]看看 issues 別人有沒有遇到同樣的問題。果然這次有,原因是它的依賴包 `draft-js`[4] 更新後的問題,具體的看這個 `issues`[5]

這個是由於插件的依賴包更新出現的問題,直接去鎖定當前插件沒有作用,不會對它的依賴包產生約束(依賴包還是會去下載最新版本的包)。我的臨時解決辦法是嘗試將版本回退到後一個版本並鎖定。這樣做的原因是回退版本的依賴包版本肯定會低於現在的,之前的版本是正常的。

經驗教訓

其實這兩起事件是同一個誘因導致的:沒有鎖定當前項目依賴樹模塊的版本。下面就來探究一下依賴包的版本管理。

1. 語義化版本(semver)

package.json 在前端工程化中主要用來記錄依賴包名稱、版本、運行指令等信息字段。其中,dependencies 字段指定了項目運行所依賴的模塊,devDependencies 指定項目開發所需要的模塊。它們都指向一個對象。該對象的各個成員,分別由模塊名和對應的版本要求組成,表示依賴的模塊及其版本範圍。對應的版本可以加上各種限定,主要有以下幾種:

  • 指定版本:比如  1.2.2 ,遵循“大版本.次要版本.小版本”的格式規定,安裝時只安裝指定版本。
  • 波浪號( tilde)+指定版本:比如  ~1.2.2 ,表示安裝  1.2.x 的最新版本(不低於 1.2.2),但是不安裝  1.3.x,也就是說安裝時不改變大版本號和次要版本號。
  • 插入號( caret)+指定版本:比如  ˆ1.2.2,表示安裝  1.x.x 的最新版本(不低於  1.2.2),但是不安裝  2.x.x,也就是說安裝時不改變大版本號。需要注意的是,如果大版本號爲 0,則插入號的行爲與波浪號相同,這是因爲此時處於開發階段,即使是次要版本號變動,也可能帶來程序的不兼容。
  • latest:安裝最新版本。

當我們使用比如 npm install package -save 安裝一個依賴包時,版本是插入號形式。這樣每次重新安裝依賴包 npm install 時”次要版本“和“小版本”是會拉取最新的。一般的,主版本不變的情況下,不會帶來核心功能變動,API 應該兼容舊版,但是這在開源的世界裏很難控制,尤其在複雜項目的衆多依賴包中難免會引入一些意想不到的 bug

2. npm-shrinkwrap && package-lock

npm-shrinkwrap

正是存在這每次重新安裝,依賴樹模塊版本存在的不確定性,纔有了相應的鎖定版本機制。

npm5 之前可以通過 npmshrinkwrap 實現。通過運行 npm shrinkwrap,會在當前目錄下生成一個 npm-shrinkwrap.json 文件,它是 package.json 中列出的每個依賴項的大型列表,應安裝的特定版本,模塊的位置(URI),驗證模塊完整性的哈希,它需要的包列表,以及依賴項列表。運行 npm install 的時候會優先使用 npm-shrinkwrap.json 進行安裝,沒有則使用 package.json 進行安裝。

package-lock

在 npm5 版本後,當我們運行 npm intall 發現會生成一個新文件 package-lock.json,內容跟上面提到的 npm-shrinkwrap.json 基本一樣。

"vue-loader": {
"version": "14.2.4",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-14.2.4.tgz",
"integrity": "sha512-bub2/rcTMJ3etEbbeehdH2Em3G2F5vZIjMK7ZUePj5UtgmZSTtOX1xVVawDpDsy021s3vQpO6VpWJ3z3nO8dDw==",
"dev": true,
"requires": {
"consolidate": "^0.14.0",
"hash-sum": "^1.0.2",
"loader-utils": "^1.1.0",
"lru-cache": "^4.1.1",
"postcss": "^6.0.8",
"postcss-load-config": "^1.1.0",
"postcss-selector-parser": "^2.0.0",
"prettier": "^1.16.0",
"resolve": "^1.4.0",
"source-map": "^0.6.1",
"vue-hot-reload-api": "^2.2.0",
"vue-style-loader": "^4.0.1",
"vue-template-es2015-compiler": "^1.6.0"
},
"dependencies": {
"postcss-load-config": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-1.2.0.tgz",
"integrity": "sha1-U56a/J3chiASHr+djDZz4M5Q0oo=",
"dev": true,
"requires": {
"cosmiconfig": "^2.1.0",
"object-assign": "^4.1.0",
"postcss-load-options": "^1.2.0",
"postcss-load-plugins": "^2.3.0"
}
},
}
},

當項目中已有 package-lock.json 文件,在安裝項目依賴時,將以該文件爲主進行解析安裝指定版本依賴包,而不是使用 package.json 來解析和安裝模塊。因爲 package-lock 爲每個模塊及其每個依賴項指定了版本,位置和完整性哈希,所以它每次創建的安裝都是相同的。無論你使用什麼設備,或者將來安裝它都無關緊要,每次都應該給你相同的結果。

npm5 版本下 install 規則

npm 並不是一開始就是按照現有這種規則制定的。

5.0.x 版本

不管 package.json 中依賴是否有更新,npm install 都會根據 package-lock.json 下載。針對這種安裝策略,有人提出了這個 issue[6] ,然後就演變成了 5.1.0 版本後的規則。

5.1.0 版本後

當 package.json 中的依賴項有新版本時,npm install 會無視 package-lock.json 去下載新版本的依賴項並且更新 package-lock.json。針對這種安裝策略,又有人提出了一個 issue[7] 參考 npm 貢獻者 iarna 的評論,得出 5.4.2 版本後的規則。

5.4.2 版本後

如果只有一個 package.json 文件,運行 npm install 會根據它生成一個 package-lock.json 文件,這個文件相當於本次 install 的一個快照,它不僅記錄了 package.json 指明的直接依賴的版本,也記錄了間接依賴的版本。

如果 package.json 的 semver-range version 和 package-lock.json 中版本兼容(package-lock.json 版本在 package.json 指定的版本範圍內),即使此時 package.json 中有新的版本,執行 npm install 也還是會根據 package-lock.json 下載。

如果手動修改了 package.json 的 version ranges,且和 package-lock.json 中版本不兼容,那麼執行 npm install 時 package-lock.json 將會更新到兼容 package.json 的版本。

3. yarn

yarn 的出現主要目標是解決上面描述的由於語義版本控制而導致的 npm 安裝的不確定性問題。雖然可以使用 npm shrinkwrap 來實現可預測的依賴關係樹,但它並不是默認選項,而是取決於所有的開發人員知道並且啓用這個選項。yarn 採取了不同的做法。每個 yarn 安裝都會生成一個類似於npm-shrinkwrap.json 的 yarn.lock 文件,而且它是默認創建的。除了常規信息之外,yarn.lock 文件還包含要安裝的內容的校驗和,以確保使用的庫的版本相同。

yarn 的主要優化

yarn 的出現主要做了如下優化:

  • 並行安裝:無論  npm 還是  yarn 在執行包的安裝時,都會執行一系列任務。 npm 是按照隊列執行每個  package,也就是說必須要等到當前  package 安裝完成之後,才能繼續後面的安裝。而  yarn 是同步執行所有任務,提高了性能。
  • 離線模式:如果之前已經安裝過一個軟件包,用  yarn 再次安裝時之間從緩存中獲取,就不用像  npm 那樣再從網絡下載了。
  • 安裝版本統一:爲了防止拉取到不同的版本, yarn 有一個鎖定文件 ( lock file) 記錄了被確切安裝上的模塊的版本號。每次只要新增了一個模塊, yarn 就會創建(或更新) yarn.lock 這個文件。這麼做就保證了,每一次拉取同一個項目依賴時,使用的都是一樣的模塊版本。
  • 更好的語義化yarn 改變了一些  npm 命令的名稱,比如  yarn add/remove,比  npm 原本的  install/uninstall 要更清晰。

4. 安裝依賴樹流程

  1. 執行工程自身 preinstall。當前 npm 工程如果定義了 preinstall 鉤子此時會被執行。

  2. 確定首層依賴。模塊首先需要做的是確定工程中的首層依賴,也就是 dependencies 和 devDependencies 屬性中直接指定的模塊(假設此時沒有添加 npm install 參數)。工程本身是整棵依賴樹的根節點,每個首層依賴模塊都是根節點下面的一棵子樹,npm 會開啓多進程從每個首層依賴模塊開始逐步尋找更深層級的節點。

  3. 獲取模塊。獲取模塊是一個遞歸的過程,分爲以下幾步:

  • 獲取模塊信息。在下載一個模塊之前,首先要確定其版本,這是因爲  package.json 中往往是  semantic versionsemver,語義化版本)。此時如果版本描述文件( npm-shrinkwrap.json 或  package-lock.json)中有該模塊信息直接拿即可,如果沒有則從倉庫獲取。如  package.json 中某個包的版本是  ^1.1.0npm 就會去倉庫中獲取符合  1.x.x 形式的最新版本。
  • 獲取模塊實體。上一步會獲取到模塊的壓縮包地址( resolved 字段), npm 會用此地址檢查本地緩存,緩存中有就直接拿,如果沒有則從倉庫下載。
  • 查找該模塊依賴,如果有依賴則回到第  1 步,如果沒有則停止。
  • 模塊扁平化(dedupe)。上一步獲取到的是一棵完整的依賴樹,其中可能包含大量重複模塊。比如 A 模塊依賴於 loadshB 模塊同樣依賴於 lodash。在 npm3 以前會嚴格按照依賴樹的結構進行安裝,因此會造成模塊冗餘。yarn 和從 npm5 開始默認加入了一個 dedupe 的過程。它會遍歷所有節點,逐個將模塊放在根節點下面,也就是 node-modules 的第一層。當發現有重複模塊時,則將其丟棄。這裏需要對重複模塊進行一個定義,它指的是模塊名相同且 semver 兼容。每個 semver 都對應一段版本允許範圍,如果兩個模塊的版本允許範圍存在交集,那麼就可以得到一個兼容版本,而不必版本號完全一致,這可以使更多冗餘模塊在 dedupe 過程中被去掉。

  • 安裝模塊。這一步將會更新工程中的 node_modules,並執行模塊中的生命週期函數(按照 preinstallinstallpostinstall 的順序)。

  • 執行工程自身生命週期。當前 npm 工程如果定義了鉤子此時會被執行(按照 installpostinstallprepublishprepare 的順序)。

  • 5. 舉例說明

    插件 htmlparser2@^3.10.1 和 dom-serializer@^0.2.2 都有使用了 entities 依賴包,不過使用的版本不同,同時我們自己安裝一個版本的 entities 包。具體如下:

    --htmlparser2@^3.10.1
    |--entities@^1.1.1
    --dom-serializer@^0.2.2
    |--entities@^2.0.0
    --entities@^2.1.0

    通過 npm install 安裝後,生成的 package-lock.json 文件內容和它的 node_modules 目錄結構:

    可以發現:

    1. dom-serializer@^0.2.2 的依賴包  entities@^2.0.0 和我們自己安裝的  entities@^2.1.0 被實際安裝成  entities@^2.2.0,並放在  node_modules 的第一層。因爲這兩個版本的 semver 範圍相同,又先被遍歷,所有會被合併安裝在第一層;
    2. htmlparser2@^3.10.1 的依賴包  entities@^1.1.1 被實際安放在  dom-serializer 包的  node_modules 中,並且和  package-lock.json 描述結構保持一致。

    通過 yarn 安裝後,生成的 yarn.lock 文件內容和它的 node_modules 目錄結構:

    可以發現與 npm install 不同的是:

    1. yarn.lock 中所有依賴描述都是扁平化的,即沒有依賴描述的嵌套關係;
    2. 在  yarn.lock 中, 相同名稱版本號不同的依賴包,如果  semver 範圍相同會被合併,否則,會存在多個版本描述。

    注意 cnpm 不支持 package-lock

    使用 cnpm install 時候,並不會生成 package-lock.json 文件。cnpm install 的時候,就算你項目中有 package-lock.json 文件,cnpm 也不會識別,仍會根據 package.json 來安裝。所以這就是爲什麼之前你用 npm 安裝產生了 package-lock.json,後面的人用 cnpm 來安裝,可能會跟你安裝的依賴包不一致。

    因此,儘量不要直接使用 cnpm install 安裝項目依賴包。但是爲了解決直接使用 npm install 速度慢的問題,可以設置 npm 代理解決。

    // 設置淘寶鏡像代理
    npm config set registry https://registry.npm.taobao.org

    // 查看已設置代理
    npm config get registry

    當然,也可以通過 `nrm`[8] 工具,快捷操作設置代理。

    全局安裝

    $ npm install -g nrm

    查看已安裝代理列表

    $ nrm ls

    * npm ----- https://registry.npmjs.org/
    yarn ----- https://registry.yarnpkg.com
    cnpm ---- http://r.cnpmjs.org/
    taobao -- https://registry.npm.taobao.org/
    nj ------ https://registry.nodejitsu.com/
    skimdb -- https://skimdb.npmjs.com/registry

    切換代理

    $ nrm use cnpm  //switch registry to cnpm

    * Registry has been set to: http://r.cnpmjs.org/

    測速

    nrm test cnpm

    * cnpm --- 618ms

    然而,設置這些全局代理可能還是不能滿足下載一些特定依賴包(在沒有 VPN 情況下),比如:node-sasspuppeteerchromedriverelectron 等。可以通過 .npmrc 文件設置具體依賴包的國內鏡像。該文件在項目 npm install 時會被加載讀取,優先級高於 npm 全局設置。

    registry=https://registry.npm.taobao.org/
    sass_binary_site=http://npm.taobao.org/mirrors/node-sass
    chromedriver_cdnurl=http://npm.taobao.org/mirrors/chromedriver
    electron_mirror=http://npm.taobao.org/mirrors/electron/ npm install -g electron
    puppeteer_download_host=http://npm.taobao.org/mirrors/chromium-browser-snapshots/

    6. 總結

    項目在以後重新構建,由於依賴樹中有版本更新,造成意外事故是不可避免的,究其原因是整個依賴樹版本沒有鎖死。解決方案分爲如下四種:

    • package.json 中固定版本。注意:僅能鎖定當前依賴包版本,不能控制整棵依賴樹版本。
    • npm+npm-shrinkwrap.json
    • npm+package-lock.json
    • yarn+yarn-lock.json

    根據自身情況選擇~

    參考資料

    [1]

    clipboardhttps://github.com/zenorocha/clipboard.js

    [2]

    issueshttps://github.com/zenorocha/clipboard.js/issues/745

    [3]

    braft-editor: https://github.com/margox/braft-editor

    [4]

    draft-jshttps://github.com/facebook/draft-js

    [5]

    issueshttps://github.com/margox/braft-editor/issues/847

    [6]

    issue: https://github.com/npm/npm/issues/16866

    [7]

    issue: https://github.com/npm/npm/issues/17979

    [8]

    nrmhttps://www.npmjs.com/package/nrm

    最後




    點擊關注下方卡片關注我👇👇




    如何從普通程序員成長爲精通源碼的一流大佬?
    下一代前端構建工具 ViteJS 技術解讀,尤雨溪diss:Webpack!
    漫畫 | 如何憑實力炒老闆魷魚,並喜提N+1~
    爲什麼優秀的程序員都成了無能的領導?
    漫畫 | 再見 Java,再見Java之父
    面試官:Vue3.0的設計目標是什麼?做了哪些優化?
    面試官問 Vue 性能優化,我該怎麼回答?
    Vue3.0 高頻出現的幾道面試題
    面試官問 Vue 性能優化,我該怎麼回答?

    點個在看支持我吧,轉發就更好了

    本文分享自微信公衆號 - 前端佈道師(honeyBadger8)。
    如有侵權,請聯繫 [email protected] 刪除。
    本文參與“OSC源創計劃”,歡迎正在閱讀的你也加入,一起分享。

    發表評論
    所有評論
    還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
    相關文章