JS新包管理工具yarn和npm的對(duì)比與使用入門
這篇文章會(huì)通過以下幾個(gè)方面介紹yarn的:
- yarn對(duì)比npm解決了什么問題,帶來哪些便利。
- 獲取yarn的正確姿勢(shì)
- yarn的使用入門(介紹一些常用的命令
- 個(gè)人使用心得
yarn對(duì)比npm的優(yōu)點(diǎn)
根據(jù)官方文檔yarn具有6大優(yōu)點(diǎn)
1、離線模式
yarn會(huì)有一個(gè)緩存目錄,會(huì)緩存以前安裝過的軟件包,再次安裝時(shí)就不必從網(wǎng)絡(luò)下載了,大大加速安裝速度。
這一點(diǎn)很重要,npm 飽受詬病的一點(diǎn)就是,每次安裝依賴,都需要從網(wǎng)絡(luò)下載一大堆東西,而且是全部重新下載,工程多的時(shí)候比較煩人。
我司部署node項(xiàng)目,是需要在發(fā)布機(jī)上install所有的依賴而且發(fā)布機(jī)的網(wǎng)絡(luò)環(huán)境不是很好(不給搭梯子),導(dǎo)致安裝慢不說還經(jīng)常失敗(部分包需要聯(lián)網(wǎng)編譯)。更換yarn后只需將yarn的cache目錄緩存起來,每次install嗷嗷的快,麻麻再也不用擔(dān)心發(fā)布失敗了。
2、依賴關(guān)系確定性
在每一臺(tái)機(jī)器上針對(duì)同一個(gè)工程安裝依賴時(shí),生成的依賴關(guān)系順序和版本是一致的。
之前 npm 在這里有一個(gè)處理得不好的地方 。舉例來說,我寫的工程依賴 A, B, C 三個(gè)庫,我在編寫 package.json 的時(shí)候,給 A, B, C 都指定了版本號(hào)。但是 A 庫可能又依賴 D, E, F 庫,D 庫又依賴 G, H 庫。這么多關(guān)聯(lián)依賴關(guān)系中,很可能某個(gè)庫在指定依賴時(shí),沒有指定版本號(hào)。
于是,這就導(dǎo)致了一個(gè)問題。如果我在另一臺(tái)機(jī)器上對(duì)同樣的工程安裝依賴,或者把這臺(tái)機(jī)器工程下的 node_modules 目錄刪除來重新安裝依賴。由于關(guān)聯(lián)依賴中,沒有指定版本號(hào)的庫,發(fā)生了版本更新,就會(huì)導(dǎo)致再次安裝的依賴,其中具體某些軟件包的版本是不一致的。在這種情況下,你會(huì)發(fā)現(xiàn)原來能夠正常運(yùn)行的程序,忽然變得不能工作或一堆 BUG.
npm對(duì)包引入順序也十分的敏感,比如在一個(gè)空項(xiàng)目里執(zhí)行以下命令
npm init -y npm install globule@0.1.0 -S npm install babel-generator@6.19.0 -S npm install babel-helper-define-map@6.18.0 -S
我們這里安裝了3個(gè)包都依賴于lodash,不過globule依賴lodash@1.0.3,另外兩個(gè)依賴lodash@4.x。
現(xiàn)在目錄依賴結(jié)構(gòu)如下
這時(shí)假設(shè)我們?cè)陧?xiàng)目里使用lodash,但是忘記重新安裝lodash
var lodash = require('lodash'); console.log(lodash.VERSION); // v1.0.3
另一個(gè)同事獲取項(xiàng)目代碼,執(zhí)行npm install
, 這時(shí)的目錄依賴結(jié)構(gòu)為
可以看到第一層依賴的lodash變成了4.x版本,這樣就造成了依賴版本不一致的問題。而yarn則會(huì)保證無論怎樣引入的順序,目錄依賴結(jié)構(gòu)都是一致的,確保不會(huì)發(fā)生這樣的BUG。
3、網(wǎng)絡(luò)性能優(yōu)化
下載軟件時(shí)會(huì)優(yōu)化請(qǐng)求順序,避免請(qǐng)求瀑布發(fā)生
4、網(wǎng)絡(luò)回彈
yarn在某個(gè)安裝包請(qǐng)求失敗時(shí)不會(huì)導(dǎo)致安裝失敗,它會(huì)自動(dòng)去嘗試重新安裝。而npm則會(huì)毫不猶豫的失敗,導(dǎo)致得再來一次,耗費(fèi)時(shí)間
5、多注冊(cè)來源
所有的依賴包,不管他被不同的庫間接關(guān)聯(lián)引用多少次,安裝這個(gè)包時(shí),只會(huì)從一個(gè)注冊(cè)來源去裝,要么是 npm 要么是 bower, 防止出現(xiàn)混亂不一致。
6、扁平模式
對(duì)于多個(gè)包依賴同一個(gè)子包的情況,yarn會(huì)盡量提取為同一個(gè)包,防止出現(xiàn)多處副本,浪費(fèi)空間。比如1.2中,yarn會(huì)為babel-generator和babel-helper-define-map 創(chuàng)建同一個(gè)lodash子依賴,這樣就節(jié)約一份的空間。
更多的emojis
表情包大戰(zhàn)o(╯□╰)o
正確的安裝姿勢(shì)
注意yarn依賴node運(yùn)行環(huán)境,官網(wǎng)提供了不同環(huán)境下的N種安裝方法,點(diǎn)我查看。其中最重要的也是最通用的當(dāng)然是npm install yarn -g
,也不知道官網(wǎng)搞那么多幺蛾子的安裝方式干嘛又是brew又是yum,還折騰半天。
yarn常用命令介紹
創(chuàng)建項(xiàng)目
命令yarn init
,詳細(xì)介紹
跟npm一樣,會(huì)出現(xiàn)一個(gè)交互式的窗口,問一些package相關(guān)的問題
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.
當(dāng)然可以加參數(shù) --yes/-y
來自動(dòng)回答所有的問題(yes),便捷的生成一個(gè)package.json
管理依賴
注意,以下的命令都會(huì)自動(dòng)更新你的package.json和yarn.lock文件
添加依賴
命令yarn add [package]@[version/tag]
,詳細(xì)介紹
這會(huì)自動(dòng)把包添加到package.json里的dependencies,也同時(shí)會(huì)更新yarn.lock
{ "name": "my-package", "dependencies": { + "package-1": "^1.0.0" } }
添加到不同的dependencies需要加如下參數(shù)
yarn add --dev/-D
添加到devDependenciesyarn add --peer/-P
添加到peerDependenciesyarn add --optional/-O
添加到optionalDependencies
更新依賴
命令yarn upgrade [package]@[version/tag]
,詳細(xì)介紹
更新某個(gè)依賴的版本,并自動(dòng)更新package.json和yarn.lock文件
{ "name": "my-package", "dependencies": { - "package-1": "^1.0.0" + "package-1": "^2.0.0" } }
刪除依賴
命令yarn remove [package]
刪除某個(gè)依賴,并自動(dòng)更新package.json和yarn.lock文件
安裝依賴
命令 yarn install
,詳細(xì)介紹
會(huì)從package.json里提取所有的依賴并安裝,然后生成yarn.lock鎖定所有的依賴版本,別人執(zhí)行yarn install
時(shí)會(huì)根據(jù)yarn.lock安裝依賴,保證不同的電腦安裝的依賴目錄結(jié)構(gòu)完全一致。
可選參數(shù)
yarn install
--flat 有且僅有一個(gè)依賴的版本被允許,多依賴會(huì)出現(xiàn)一個(gè)交互式窗口,讓使用者選擇某一個(gè)版本安裝
yarn install
--force 強(qiáng)制重新下載所有的依賴包
yarn install
--production 只下載dependencies下的依賴
全局命令
在yarn命令前加一個(gè)global修飾,可以將命令變?yōu)槿值?,支持的命令?add,bin,ls,remove,upgrade
例如npm install gulp -g
,可以用yarn global add gulp
來替代
個(gè)人使用心得
更換安裝源,使用阿里提供的npm register
加速, yarn config set registry 'https://registry.npm.taobao.org'
,當(dāng)然如果npm已經(jīng)配置過,yarn就無需再配置了。
yarn還有許多小問題,不過官方也在努力修復(fù)中,建議時(shí)不時(shí)使用yarn self-update
來更新版本
以前包鎖定是使用npm shrinkwrap
命令,感覺繁瑣且難維護(hù),使用yarn后自動(dòng)生成鎖定文件,簡單方便
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
相關(guān)文章
從表單校驗(yàn)看JavaScript策略模式的使用詳解
這篇文章主要介紹了從表單校驗(yàn)看JavaScript策略模式的使用,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-10uniapp實(shí)現(xiàn)滑動(dòng)評(píng)分效果
這篇文章主要為大家詳細(xì)介紹了uniapp實(shí)現(xiàn)滑動(dòng)評(píng)分效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09原生js實(shí)現(xiàn)ajax請(qǐng)求和JSONP跨域請(qǐng)求操作示例
這篇文章主要介紹了原生js實(shí)現(xiàn)ajax請(qǐng)求和JSONP跨域請(qǐng)求操作,結(jié)合實(shí)例形式分析了基于原生js實(shí)現(xiàn)的ajax請(qǐng)求和JSONP跨域請(qǐng)求相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-03-03cookie在javascript中的使用技巧以及隱私在服務(wù)器端的設(shè)置
cookie在javascript中的使用技巧,需要的朋友可以參考下2012-12-12javascript實(shí)現(xiàn)的字符串轉(zhuǎn)換成數(shù)組操作示例
這篇文章主要介紹了javascript實(shí)現(xiàn)的字符串轉(zhuǎn)換成數(shù)組操作,涉及javascript字符串與數(shù)組相互轉(zhuǎn)換、以及數(shù)組反轉(zhuǎn)相關(guān)操作技巧,需要的朋友可以參考下2019-06-06