DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS新包管理工具yarn和npm的對比與使用入門
JS新包管理工具yarn和npm的對比與使用入門
編輯:關於JavaScript     

這篇文章會通過以下幾個方面介紹yarn的:

  1. yarn對比npm解決了什麼問題,帶來哪些便利。
  2. 獲取yarn的正確姿勢
  3. yarn的使用入門(介紹一些常用的命令
  4. 個人使用心得

yarn對比npm的優點

根據官方文檔yarn具有6大優點

1、離線模式

yarn會有一個緩存目錄,會緩存以前安裝過的軟件包,再次安裝時就不必從網絡下載了,大大加速安裝速度。

這一點很重要,npm 飽受诟病的一點就是,每次安裝依賴,都需要從網絡下載一大堆東西,而且是全部重新下載,工程多的時候比較煩人。

我司部署node項目,是需要在發布機上install所有的依賴而且發布機的網絡環境不是很好(不給搭梯子),導致安裝慢不說還經常失敗(部分包需要聯網編譯)。更換yarn後只需將yarn的cache目錄緩存起來,每次install嗷嗷的快,麻麻再也不用擔心發布失敗了。

2、依賴關系確定性

在每一台機器上針對同一個工程安裝依賴時,生成的依賴關系順序和版本是一致的。

之前 npm 在這裡有一個處理得不好的地方 。舉例來說,我寫的工程依賴 A, B, C 三個庫,我在編寫 package.json 的時候,給 A, B, C 都指定了版本號。但是 A 庫可能又依賴 D, E, F 庫,D 庫又依賴 G, H 庫。這麼多關聯依賴關系中,很可能某個庫在指定依賴時,沒有指定版本號。

於是,這就導致了一個問題。如果我在另一台機器上對同樣的工程安裝依賴,或者把這台機器工程下的 node_modules 目錄刪除來重新安裝依賴。由於關聯依賴中,沒有指定版本號的庫,發生了版本更新,就會導致再次安裝的依賴,其中具體某些軟件包的版本是不一致的。在這種情況下,你會發現原來能夠正常運行的程序,忽然變得不能工作或一堆 BUG.

npm對包引入順序也十分的敏感,比如在一個空項目裡執行以下命令

npm init -y
npm install [email protected] -S
npm install [email protected] -S
npm install [email protected] -S

我們這裡安裝了3個包都依賴於lodash,不過globule依賴[email protected],另外兩個依賴[email protected]

現在目錄依賴結構如下

這時假設我們在項目裡使用lodash,但是忘記重新安裝lodash

var lodash = require('lodash');
console.log(lodash.VERSION); // v1.0.3

另一個同事獲取項目代碼,執行npm install , 這時的目錄依賴結構為

可以看到第一層依賴的lodash變成了4.x版本,這樣就造成了依賴版本不一致的問題。而yarn則會保證無論怎樣引入的順序,目錄依賴結構都是一致的,確保不會發生這樣的BUG。

3、網絡性能優化

下載軟件時會優化請求順序,避免請求瀑布發生

4、網絡回彈

yarn在某個安裝包請求失敗時不會導致安裝失敗,它會自動去嘗試重新安裝。而npm則會毫不猶豫的失敗,導致得再來一次,耗費時間

5、多注冊來源

所有的依賴包,不管他被不同的庫間接關聯引用多少次,安裝這個包時,只會從一個注冊來源去裝,要麼是 npm 要麼是 bower, 防止出現混亂不一致。

6、扁平模式

對於多個包依賴同一個子包的情況,yarn會盡量提取為同一個包,防止出現多處副本,浪費空間。比如1.2中,yarn會為babel-generator和babel-helper-define-map 創建同一個lodash子依賴,這樣就節約一份的空間。

更多的emojis

表情包大戰o(╯□╰)o

正確的安裝姿勢

注意yarn依賴node運行環境,官網提供了不同環境下的N種安裝方法,點我查看。其中最重要的也是最通用的當然是npm install yarn -g,也不知道官網搞那麼多幺蛾子的安裝方式干嘛又是brew又是yum,還折騰半天。

yarn常用命令介紹

創建項目

命令yarn init,詳細介紹

跟npm一樣,會出現一個交互式的窗口,問一些package相關的問題

question name (testdir): my-awesome-package
question version (1.0.0): 
question description: The best package you will ever find.
question entry point (index.js): 
question git repository: https://github.com/yarnpkg/example-yarn-package
question author: Yarn Contributor
question license (MIT): 
success Saved package.json
✨ Done in 87.70s.

當然可以加參數 --yes/-y 來自動回答所有的問題(yes),便捷的生成一個package.json

管理依賴

注意,以下的命令都會自動更新你的package.json和yarn.lock文件

添加依賴

命令yarn add [package]@[version/tag] ,詳細介紹

這會自動把包添加到package.json裡的dependencies,也同時會更新yarn.lock

 {
 "name": "my-package",
 "dependencies": {
+ "package-1": "^1.0.0"
 }
 }

添加到不同的dependencies需要加如下參數

  1. yarn add --dev/-D 添加到devDependencies
  2. yarn add --peer/-P 添加到peerDependencies
  3. yarn add --optional/-O 添加到optionalDependencies

更新依賴

命令yarn upgrade [package]@[version/tag] ,詳細介紹

更新某個依賴的版本,並自動更新package.json和yarn.lock文件

 {
 "name": "my-package",
 "dependencies": {
- "package-1": "^1.0.0"
+ "package-1": "^2.0.0"
 }
 }

刪除依賴

命令yarn remove [package]

刪除某個依賴,並自動更新package.json和yarn.lock文件

安裝依賴

命令 yarn install ,詳細介紹

會從package.json裡提取所有的依賴並安裝,然後生成yarn.lock鎖定所有的依賴版本,別人執行yarn install時會根據yarn.lock安裝依賴,保證不同的電腦安裝的依賴目錄結構完全一致。

可選參數

yarn install --flat 有且僅有一個依賴的版本被允許,多依賴會出現一個交互式窗口,讓使用者選擇某一個版本安裝

yarn install --force 強制重新下載所有的依賴包

yarn install --production 只下載dependencies下的依賴

全局命令

在yarn命令前加一個global修飾,可以將命令變為全局的,支持的命令有 add,bin,ls,remove,upgrade

例如npm install gulp -g ,可以用yarn global add gulp來替代

個人使用心得

更換安裝源,使用阿裡提供的npm register加速, yarn config set registry 'https://registry.npm.taobao.org',當然如果npm已經配置過,yarn就無需再配置了。

yarn還有許多小問題,不過官方也在努力修復中,建議時不時使用yarn self-update來更新版本

以前包鎖定是使用npm shrinkwrap命令,感覺繁瑣且難維護,使用yarn後自動生成鎖定文件,簡單方便

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved