npm和yarn的區別,我們該如何選擇?

simbawu發表於2018-03-26

週一入職,同事JJ讓我熟悉一下基於React的新專案。 按照以往,我的步驟都是:

git clone xxx
npm install
npm run dev
複製程式碼

這時,JJ給我來了下面一段

git clone xxx
yarn
yarn start
複製程式碼

“咦,yarn是什麼鬼?難道npm更高階的替代品?為什麼要替代npm?難道有什麼好的地方?”,內心一連串的問題冒出來。我就默默的問了一下JJ:“yarn是跟npm一樣的東西嗎?”,“嗯。”JJ忙碌的敲著鍵盤,顯然這個問題不值得繼續問下去了。我也默默的把剛才腦子裡一連串的問題記了下來。

Yarn是什麼?

“Yarn是由Facebook、Google、Exponent 和 Tilde 聯合推出了一個新的 JS 包管理工具 ,正如官方文件中寫的,Yarn 是為了彌補 npm 的一些缺陷而出現的。”這句話讓我想起了使用npm時的坑了:

  • npm install的時候巨慢。特別是新的專案拉下來要等半天,刪除node_modules,重新install的時候依舊如此。
  • 同一個專案,安裝的時候無法保持一致性。由於package.json檔案中版本號的特點,下面三個版本號在安裝的時候代表不同的含義。
"5.0.3",
"~5.0.3",
"^5.0.3"
複製程式碼

“5.0.3”表示安裝指定的5.0.3版本,“~5.0.3”表示安裝5.0.X中最新的版本,“^5.0.3”表示安裝5.X.X中最新的版本。這就麻煩了,常常會出現同一個專案,有的同事是OK的,有的同事會由於安裝的版本不一致出現bug。

  • 安裝的時候,包會在同一時間下載和安裝,中途某個時候,一個包丟擲了一個錯誤,但是npm會繼續下載和安裝包。因為npm會把所有的日誌輸出到終端,有關錯誤包的錯誤資訊就會在一大堆npm列印的警告中丟失掉,並且你甚至永遠不會注意到實際發生的錯誤

帶著這些坑,我開始瞭解Yarn的優勢及其解決的問題。

Yarn的優點?

  • 速度快 。速度快主要來自以下兩個方面:
  1. 並行安裝:無論 npm 還是 Yarn 在執行包的安裝時,都會執行一系列任務。npm 是按照佇列執行每個 package,也就是說必須要等到當前 package 安裝完成之後,才能繼續後面的安裝。而 Yarn 是同步執行所有任務,提高了效能。
  2. 離線模式:如果之前已經安裝過一個軟體包,用Yarn再次安裝時之間從快取中獲取,就不用像npm那樣再從網路下載了。
  • 安裝版本統一:為了防止拉取到不同的版本,Yarn 有一個鎖定檔案 (lock file) 記錄了被確切安裝上的模組的版本號。每次只要新增了一個模組,Yarn 就會建立(或更新)yarn.lock 這個檔案。這麼做就保證了,每一次拉取同一個專案依賴時,使用的都是一樣的模組版本。npm 其實也有辦法實現處處使用相同版本的 packages,但需要開發者執行 npm shrinkwrap 命令。這個命令將會生成一個鎖定檔案,在執行 npm install 的時候,該鎖定檔案會先被讀取,和 Yarn 讀取 yarn.lock 檔案一個道理。npm 和 Yarn 兩者的不同之處在於,Yarn 預設會生成這樣的鎖定檔案,而 npm 要通過 shrinkwrap 命令生成 npm-shrinkwrap.json 檔案,只有當這個檔案存在的時候,packages 版本資訊才會被記錄和更新。
  • 更簡潔的輸出:npm 的輸出資訊比較冗長。在執行 npm install 的時候,命令列裡會不斷地列印出所有被安裝上的依賴。相比之下,Yarn 簡潔太多:預設情況下,結合了 emoji直觀且直接地列印出必要的資訊,也提供了一些命令供開發者查詢額外的安裝資訊。
  • **多註冊來源處理:**所有的依賴包,不管他被不同的庫間接關聯引用多少次,安裝這個包時,只會從一個註冊來源去裝,要麼是 npm 要麼是 bower, 防止出現混亂不一致。
  • 更好的語義化: yarn改變了一些npm命令的名稱,比如 yarn add/remove,感覺上比 npm 原本的 install/uninstall 要更清晰。

Yarn和npm命令對比

npm yarn
npm install yarn
npm install react --save yarn add react
npm uninstall react --save yarn remove react
npm install react --save-dev yarn add react --dev
npm update --save yarn upgrade

npm的未來:npm5.0

有了yarn的壓力之後,npm做了一些類似的改進。

  1. 預設新增了類似yarn.lock的 package-lock.json;
  2. git 依賴支援優化:這個特性在需要安裝大量內部專案(例如在沒有自建源的內網開發),或需要使用某些依賴的未釋出版本時很有用。在這之前可能需要使用指定 commit_id 的方式來控制版本。
  3. 檔案依賴優化:在之前的版本,如果將本地目錄作為依賴來安裝,將會把檔案目錄作為副本拷貝到 node_modules 中。而在 npm5 中,將改為使用建立 symlinks 的方式來實現(使用本地 tarball 包除外),而不再執行檔案拷貝。這將會提升安裝速度。目前yarn還不支援。

總結

在npm5.0之前,yarn的優勢特別明顯。但是在npm之後,通過以上一系列對比,我們可以看到 npm5 在速度和使用上確實有了很大提升,值得嘗試,不過還沒有超過yarn。

綜上我個人的建議是如果你已經在個人專案上使用 yarn,並且沒有遇到更多問題,目前完全可以繼續使用。但如果有相容 npm 的場景,或者身處在使用 npm,cnpm,tnpm 的團隊,以及還沒有切到 yarn 的專案,那現在就可以試一試 npm5 了。

歡迎討論,點個贊再走吧~

文章同步於以下社群,可以選一個關注我噢 。◕‿◕。

simbawu | github | segmentfault | 知乎 | 簡書 | 掘金

相關文章