前端工程化代碼一般通過 包(package) (或者稱為 模塊（module）) 的方式來共享梭纹，因此你可以通過它使用全世界開發(fā)者的代碼，或者分享自己的代碼。開發(fā)者通常運(yùn)用包管理工具來安裝項目所需的依賴，因此出現(xiàn)許多包管理工具斑司，比如：npm、yarn但汞、bower等宿刮。
本文將帶大家初步了解yarn和npm。
什么是 Npm私蕾，Yarn
1.npm 簡介
npm 即：npm package manager 僵缺，是一種重用其他開發(fā)人員的代碼的方法，也是一種與他人共享代碼的方式是目，并且可以很容易地管理不同版本的代碼谤饭。npm 開始作為 Node 包管理器，所以你會發(fā)現(xiàn)很多模塊可以在服務(wù)器端使用懊纳。也有很多的包添加命令供您在命令行中使用揉抵。你還會發(fā)現(xiàn)可以在前端使用的軟件包。
npm 由三個不同的部分組成：網(wǎng)站嗤疯，注冊表和 CLI 冤今。該網(wǎng)站是用戶發(fā)現(xiàn)軟件包的主要工具，注冊表是一個關(guān)于軟件包信息的大型數(shù)據(jù)庫茂缚，而 CLI 則是開發(fā)者如何在注冊表上發(fā)布他們的軟件包或下載他們希望安裝的軟件包戏罢。更多詳細(xì)內(nèi)容屋谭，可參見 what-is-npm。
2.yarn 簡介
yarn 對你的代碼來說是一個包管理器龟糕， 你可以通過它使用全世界開發(fā)者的代碼桐磁，或者分享自己的代碼。 yarn 做這些快捷讲岁、安全于樟、可靠吗冤，所以你不用擔(dān)心什么攒庵。通過 yarn芳撒，你可以使用其他開發(fā)者針對不同問題的解決方案，使自己的開發(fā)過程更簡單阶淘。 使用過程中遇到問題衙吩，你可以將其上報或者貢獻(xiàn)解決方案。一旦問題被修復(fù)溪窒，Yarn會更新保持同步坤塞。
yarn 是 Facebook, Google, Exponent 和 Tilde 開發(fā)的一款新的 JavaScript 包管理工具。它并沒有試圖完全取代 npm澈蚌。yarn 同樣是一個從 npm 注冊源獲取模塊的新的 CLI 客戶端尺锚。注冊的方式不會有任何變化 —— 你同樣可以正常獲取與發(fā)布包。它存在的目的是解決團(tuán)隊在使用 npm 面臨的少數(shù)問題惜浅。當(dāng)然，在 Node 版本斷更替中伏嗜，npm 本身也在積極更新
關(guān)于安裝/更新
1.npm 安裝/更新
- 安裝
npm 開始作為 Node 包管理器坛悉，所以它的安裝是跟 Node.js 捆綁在一起的。至于如何安裝 Node.js, Npm 官方承绸，在 Installing Node.js and updating npm 做了闡述裸影。之前在不同平臺嘗試更新 Node.js 之時，也是遇到過各種問題军熏，有在 NodeJs 升級/安裝折騰記 一文做了記載轩猩；折騰許久，得出的結(jié)論跟官網(wǎng)一致：
如果您使用的是OS X或Windows荡澎，安裝Node.js的最佳方法是：使用 Node.js下載頁面中的一個安裝程序均践。
- 更新
- npm install npm@latest -g （npm install npm -g）
- 更新(重新下載) Node.js
2.yarn 安裝/更新
- 安裝
對于如何安裝 yarn，yarn 官方給出了很全面的說明摩幔，詳見 Install Yarn彤委；涵蓋 MacOs，Windows或衡，Linux 等平臺焦影，并且還給出一些備用安裝方式车遂，譬如通過 npm 來安裝：
npm install --global yarn
當(dāng)然，yarn 官方在 Yarn 備選安裝方式有明確講道：
一般來說, 不推薦通過
npm安裝yarn斯辰，在用基于 Node 的包管理器安裝yarn時舶担，該包未被簽名， 并且只通過基本的 SHA1 散列進(jìn)行唯一完整性檢查彬呻。這在安裝系統(tǒng)級應(yīng)用時有安全風(fēng)險衣陶。因為這些原因，高度推薦用你的操作系統(tǒng)最適合的方式來安裝yarn废岂。
但在實際使用中祖搓，這倒是最為方便的方式之一，迄今倒也沒遇到什么問題湖苞；當(dāng)然拯欧，最好按照官方推薦的方式；如果你使用并熟悉 Mac 操作系統(tǒng)财骨，用推薦方式安裝 yarn 也是很簡單：brew install yarn
- 更新
對于如何更新 yarn镐作，可以結(jié)合安裝時候?qū)?yīng)命令；如果是 Mac 操作系統(tǒng)隆箩，使用 brew 安裝该贾，那么如此操作予以更新：
brew upgrade yarn
如果 yarn 通過 Debian / Ubuntu 包安裝，則可以運(yùn)行如下命令予以更新：
sudo apt-get update && sudo apt-get install yarn
也可以使用 yarn 本身來更新自己：
yarn global add yarn
如果有意了解更多如何更新 yarn 的方法捌臊，可參見：yarn self-update should update using the same installation method originally used
npm 與 yarn 常用命令對比
有所區(qū)別的命令
| Npm | Yarn | 功能描述 |
|---|---|---|
| npm install(npm i) | yarn install(yarn) | 根據(jù) package.json 安裝所有依賴 |
| npm i --save [package] | yarn add [package] | 添加依賴包 |
| npm i --save-dev [package] | yarn add [package] --dev | 添加依賴包至 devDependencies |
| npm i -g [package] | yarn global add [package] | 進(jìn)行全局安裝依賴包 |
| npm update --save | yarn upgrade [package] | 升級依賴包 |
| npm uninstall [package] | yarn remove [package] | 移除依賴包 |
相同操作的命令
| Npm | Yarn | 功能描述 |
|---|---|---|
| npm run | yarn run | 運(yùn)行 package.json 中預(yù)定義的腳本 |
| npm config list | yarn config list | 查看配置信息 |
| npm config set registry 倉庫地址 | yarn config set registry 倉庫地址 | 更換倉庫地址 |
| npm init | yarn init | 互動式創(chuàng)建/更新 package.json 文件 |
| npm list | yarn list | 查看當(dāng)前目錄下已安裝的node包 |
| npm login | yarn login | 保存你的用戶名杨蛋、郵箱 |
| npm logout | yarn logout | 刪除你的用戶名、郵箱 |
| npm outdated | yarn outdated | 檢查過時的依賴包 |
| npm link | yarn link | 開發(fā)時鏈接依賴包理澎，以便在其他項目中使用 |
| npm unlink | yarn unlink | 取消鏈接依賴包 |
| npm publish | yarn publish | 將包發(fā)布到 npm |
| npm test | yarn test | 測試 = yarn run test |
| npm bin | yarn bin | 顯示 bin 文件所在的安裝目錄 |
| yarn info <package> | yarn info <package> | 顯示一個包的信息 |
對于以上還須對于逞力，還須做如下補(bǔ)充性說明：
在 npm 中，可以使用 npm config set save true 設(shè)置 —-save 為默認(rèn)行為糠爬，但這對多數(shù)開發(fā)者而言寇荧，并非顯而易見的。而使用 yarn执隧，在package.json 中添加（add）和移除（remove）等行為是默認(rèn)的揩抡。
-
對于要添加或升級的包，npm 與 yarn 都可以指定具體的版本镀琉，或者 Tag峦嗤；如：
yarn add [package]@[version]
yarn add [package]@[tag] 在國內(nèi)，使用 npm屋摔，最好還是替換成淘寶的鏡像寻仗，如此網(wǎng)絡(luò)影響減小到最低，這樣安裝依賴包的速度凡壤，可以得到蠻大的改善署尤，可以參考文章 使用淘寶鏡像解決npm速度慢的問題
Npm 獨有的命令
-
npm rebuild pacakgename: 用于更改包內(nèi)容后進(jìn)行重建耙替；比如常見的
npm rebuild node-sass；當(dāng)使用 Sass（Scss） 來作樣式表預(yù)處理器曹体，再打包的時候俗扇，你可能會遇見如下錯誤；而解決此問題箕别，最為簡單的方式即使用rebuild命令铜幽，對 node-sass 進(jìn)行重建即可。
<span style="color: red">Module build failed: ModuleBuildError: Module build failed: Error: Node Sass does not yet support your current environment:
This usually happens because your environment has changed since running npm install. Run npm rebuild node-sass to build the binding for your current environment.</span>
Yarn 獨有的命令
-
yarn import：依據(jù)原npm安裝后的
node_modules目錄生成一份yarn.lock文件串稀； - yarn licenses：列出已安裝包的許可證信息除抛；
- yarn pack：創(chuàng)建一個壓縮的包依賴 gzip 檔案；
- yarn why：顯示有關(guān)一個包為何被安裝的信息母截。
- yarn autoclean：從包依賴?yán)锴宄⒁瞥恍枰奈募?/li>
關(guān)于 package-lock.json 和 yarn.lock
關(guān)于 yarn.lock
有時候一個項目周期很長到忽，在不斷開發(fā)的同時，而依賴的庫也會有很大改變清寇；有時候你可能只想運(yùn)行 npm i 更新沒有下載的插件喘漏，卻不想偶爾會將依賴的一些其他插件更到最新，導(dǎo)致各種奇葩問題华烟；package-lock.json 和 yarn.lock 就是為解決這種問題而設(shè)定的存在翩迈。
使用 npm 或者 yarn，都會有 pacakge.json 這個文件盔夜，用以標(biāo)出自己項目對 各庫包的依賴负饲。舉個例子來說，你的項目中有如下依賴：
"dependencies": {
"jade-package": "^2.3.4"
}
這其中的 ^ 是定義了向后(新)兼容依賴喂链；在 npm<5.0 以前绽族，如果 jade-package 的版本超過2.3.4，并在大版本號（2）上相同衩藤，就允許下載最新版本的 jade-package 庫包，例如實際上可能運(yùn)行npm i時候涛漂，下載的具體版本可能是2.5.8赏表。
多數(shù)情況下，這種向后兼容依賴下載最新庫包匈仗，是沒有問題的瓢剿；然而，因為 npm 是開源世界悠轩，各庫包的版本語義可能并不相同间狂，不是所有開發(fā)者都能嚴(yán)格遵守這一原則：相同大版本號的同一個庫包，其接口符合兼容要求火架。而且鉴象，不同的庫包之間也存在其他依賴忙菠。理想狀態(tài)下使用語義化版本發(fā)布補(bǔ)丁不會包含大的變化，但不幸的是這必非真理纺弊。npm 的這種策略牛欢，有可能導(dǎo)致兩臺擁有相同 package.json 文件的機(jī)子，實際上安裝了不同版本的包淆游，這可能導(dǎo)致一些錯誤傍睹。有時候，相同機(jī)器稍不留神的一個 npm i犹菱，就可能導(dǎo)致 node_modules 中安裝的實際依賴被更新拾稳，也就可能導(dǎo)致項目運(yùn)行呈現(xiàn)，被面目全非腊脱。
yarn.lock 就是為解決此問題而衍生的存在访得；為了跨機(jī)器安裝得到一致的結(jié)果，Yarn 需要比你配置在 package.json 中的依賴列表更多的信息虑椎。 Yarn 需要準(zhǔn)確存儲每個安裝的依賴是哪個版本震鹉；它類似于 npm 的 npm-shrinkwrap.json，并且無副作用捆姜。只是需要注意的是：
yarn.lock文件是自動產(chǎn)生的传趾，而且應(yīng)該完全被Yarn管理。 當(dāng)你用 Yarn CLI 增加／升級／刪除依賴泥技，它將自動更新你的yarn.lock文件浆兰。 不要直接編輯這個文件，那樣很容易弄壞某些東西珊豹。
關(guān)于 package-lock.json
當(dāng) Node.js 升級之 v8.0 以后簸呈，自帶的 npm 也升級到了5.0；帶來速度上很大提升之外店茶，也帶來了其他很大變大蜕便；這其中就包括 package-lock.json：安裝模塊操作（改變 node_modules 文件夾內(nèi)容）會生成或更新 package-lock.json 文件；package-lock.json 之于 npm贩幻，即是yarn.lcok 之于 yarn 的翻版轿腺；更多信息可參見 npm package-lock.json。
另外丛楚，值得一提的是族壳，在 Github 上有人專門提供了 Synp 工具，用以：將yarn.lock轉(zhuǎn)換為package-lock.json趣些，反之亦然（Convert yarn.lock to package-lock.json and vice versa）仿荆。
對比 npm，yarn 的優(yōu)點
- 速度快 。速度快主要來自以下兩個方面：
- 并行安裝：無論
npm還是yarn在執(zhí)行包的安裝時拢操，都會執(zhí)行一系列任務(wù)锦亦。npm是按照隊列執(zhí)行每個package，也就是說必須要等到當(dāng)前package安裝完成之后庐冯，才能繼續(xù)后面的安裝孽亲。而yarn是同步執(zhí)行所有任務(wù)，提高了性能展父。 - 離線模式：如果之前已經(jīng)安裝過一個軟件包返劲，用
yarn再次安裝時之間從緩存中獲取，就不用像npm那樣再從網(wǎng)絡(luò)下載了栖茉。
安裝版本統(tǒng)一：為了防止拉取到不同的版本篮绿，
yarn有一個鎖定文件 (lock file) 記錄了被確切安裝上的模塊的版本號。每次只要新增了一個模塊吕漂，yarn就會創(chuàng)建（或更新）yarn.lock 這個文件亲配。這么做就保證了，每一次拉取同一個項目依賴時惶凝，使用的都是一樣的模塊版本吼虎。更簡潔的輸出：
npm的輸出信息比較冗長。在執(zhí)行 npm install <package> 的時候苍鲜，命令行里會不斷地打印出所有被安裝上的依賴思灰。相比之下，yarn簡潔太多：默認(rèn)情況下混滔，結(jié)合了emoji直觀且直接地打印出必要的信息洒疚，也提供了一些命令供開發(fā)者查詢額外的安裝信息。多注冊來源處理：所有的依賴包坯屿，不管他被不同的庫間接關(guān)聯(lián)引用多少次油湖，安裝這個包時，只會從一個注冊來源去裝领跛，要么是
npm要么是bower, 防止出現(xiàn)混亂不一致乏德。更好的語義化：
yarn改變了一些npm命令的名稱，比如 yarn add/remove吠昭，感覺上比 npm 原本的 install/uninstall 要更清晰喊括。
小結(jié)
對比后發(fā)現(xiàn)，似乎yarn在各方面全面領(lǐng)先于npm怎诫。事實上，在npm5之前贷痪，yarn的優(yōu)勢特別明顯幻妓。但是在npm5改進(jìn)之后，二者差距不大， npm5值得嘗試肉津！
綜上個人的建議：如果你已經(jīng)在個人項目上使用 yarn强胰，并且沒有遇到更多問題，目前完全可以繼續(xù)使用妹沙。但如果有兼容 npm 的場景偶洋，或者身處在使用 npm，cnpm 的團(tuán)隊距糖，以及還沒有切到 yarn 的項目玄窝，那現(xiàn)在就可以試一試 npm5 了。
友情鏈接：使用淘寶鏡像提高安裝速度
更多文章：猜你感興趣
原文出處：Npm vs Yarn 之備忘詳單
