前端工程化代碼一般通過 包(package) (或者稱為 模塊（module）) 的方式來共享，因此你可以通過它使用全世界開發者的代碼，或者分享自己的代碼。開發者通常運用包管理工具來安裝項目所需的依賴，因此出現許多包管理工具，比如：npm、yarn、bower等。
本文將帶大家初步了解yarn和npm。
什么是 Npm，Yarn
1.npm 簡介
npm 即：npm package manager ，是一種重用其他開發人員的代碼的方法，也是一種與他人共享代碼的方式，并且可以很容易地管理不同版本的代碼。npm 開始作為 Node 包管理器，所以你會發現很多模塊可以在服務器端使用。也有很多的包添加命令供您在命令行中使用。你還會發現可以在前端使用的軟件包。
npm 由三個不同的部分組成：網站，注冊表和 CLI 。該網站是用戶發現軟件包的主要工具，注冊表是一個關于軟件包信息的大型數據庫，而 CLI 則是開發者如何在注冊表上發布他們的軟件包或下載他們希望安裝的軟件包。更多詳細內容，可參見 what-is-npm。
2.yarn 簡介
yarn 對你的代碼來說是一個包管理器， 你可以通過它使用全世界開發者的代碼，或者分享自己的代碼。 yarn 做這些快捷、安全、可靠，所以你不用擔心什么。通過 yarn，你可以使用其他開發者針對不同問題的解決方案，使自己的開發過程更簡單。 使用過程中遇到問題，你可以將其上報或者貢獻解決方案。一旦問題被修復，Yarn會更新保持同步。
yarn 是 Facebook, Google, Exponent 和 Tilde 開發的一款新的 JavaScript 包管理工具。它并沒有試圖完全取代 npm。yarn 同樣是一個從 npm 注冊源獲取模塊的新的 CLI 客戶端。注冊的方式不會有任何變化 —— 你同樣可以正常獲取與發布包。它存在的目的是解決團隊在使用 npm 面臨的少數問題。當然，在 Node 版本斷更替中，npm 本身也在積極更新
關于安裝/更新
1.npm 安裝/更新
- 安裝
npm 開始作為 Node 包管理器，所以它的安裝是跟 Node.js 捆綁在一起的。至于如何安裝 Node.js, Npm 官方，在 Installing Node.js and updating npm 做了闡述。之前在不同平臺嘗試更新 Node.js 之時，也是遇到過各種問題，有在 NodeJs 升級/安裝折騰記 一文做了記載；折騰許久，得出的結論跟官網一致：
如果您使用的是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
當然，yarn 官方在 Yarn 備選安裝方式有明確講道：
一般來說, 不推薦通過
npm安裝yarn，在用基于 Node 的包管理器安裝yarn時，該包未被簽名， 并且只通過基本的 SHA1 散列進行唯一完整性檢查。這在安裝系統級應用時有安全風險。因為這些原因，高度推薦用你的操作系統最適合的方式來安裝yarn。
但在實際使用中，這倒是最為方便的方式之一，迄今倒也沒遇到什么問題；當然，最好按照官方推薦的方式；如果你使用并熟悉 Mac 操作系統，用推薦方式安裝 yarn 也是很簡單：brew install yarn
- 更新
對于如何更新 yarn，可以結合安裝時候對應命令；如果是 Mac 操作系統，使用 brew 安裝，那么如此操作予以更新：
brew upgrade yarn
如果 yarn 通過 Debian / Ubuntu 包安裝，則可以運行如下命令予以更新：
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 常用命令對比
有所區別的命令
| Npm | Yarn | 功能描述 |
|---|---|---|
| npm install(npm i) | yarn install(yarn) | 根據 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] | 進行全局安裝依賴包 |
| npm update --save | yarn upgrade [package] | 升級依賴包 |
| npm uninstall [package] | yarn remove [package] | 移除依賴包 |
相同操作的命令
| Npm | Yarn | 功能描述 |
|---|---|---|
| npm run | yarn run | 運行 package.json 中預定義的腳本 |
| npm config list | yarn config list | 查看配置信息 |
| npm config set registry 倉庫地址 | yarn config set registry 倉庫地址 | 更換倉庫地址 |
| npm init | yarn init | 互動式創建/更新 package.json 文件 |
| npm list | yarn list | 查看當前目錄下已安裝的node包 |
| npm login | yarn login | 保存你的用戶名、郵箱 |
| npm logout | yarn logout | 刪除你的用戶名、郵箱 |
| npm outdated | yarn outdated | 檢查過時的依賴包 |
| npm link | yarn link | 開發時鏈接依賴包，以便在其他項目中使用 |
| npm unlink | yarn unlink | 取消鏈接依賴包 |
| npm publish | yarn publish | 將包發布到 npm |
| npm test | yarn test | 測試 = yarn run test |
| npm bin | yarn bin | 顯示 bin 文件所在的安裝目錄 |
| yarn info <package> | yarn info <package> | 顯示一個包的信息 |
對于以上還須對于，還須做如下補充性說明：
在 npm 中，可以使用 npm config set save true 設置 —-save 為默認行為，但這對多數開發者而言，并非顯而易見的。而使用 yarn，在package.json 中添加（add）和移除（remove）等行為是默認的。
-
對于要添加或升級的包，npm 與 yarn 都可以指定具體的版本，或者 Tag；如：
yarn add [package]@[version]
yarn add [package]@[tag] 在國內，使用 npm，最好還是替換成淘寶的鏡像，如此網絡影響減小到最低，這樣安裝依賴包的速度，可以得到蠻大的改善，可以參考文章 使用淘寶鏡像解決npm速度慢的問題
Npm 獨有的命令
-
npm rebuild pacakgename: 用于更改包內容后進行重建；比如常見的
npm rebuild node-sass；當使用 Sass（Scss） 來作樣式表預處理器，再打包的時候，你可能會遇見如下錯誤；而解決此問題，最為簡單的方式即使用rebuild命令，對 node-sass 進行重建即可。
<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：依據原npm安裝后的
node_modules目錄生成一份yarn.lock文件； - yarn licenses：列出已安裝包的許可證信息；
- yarn pack：創建一個壓縮的包依賴 gzip 檔案；
- yarn why：顯示有關一個包為何被安裝的信息。
- yarn autoclean：從包依賴里清除并移除不需要的文件。
關于 package-lock.json 和 yarn.lock
關于 yarn.lock
有時候一個項目周期很長，在不斷開發的同時，而依賴的庫也會有很大改變；有時候你可能只想運行 npm i 更新沒有下載的插件，卻不想偶爾會將依賴的一些其他插件更到最新，導致各種奇葩問題；package-lock.json 和 yarn.lock 就是為解決這種問題而設定的存在。
使用 npm 或者 yarn，都會有 pacakge.json 這個文件，用以標出自己項目對 各庫包的依賴。舉個例子來說，你的項目中有如下依賴：
"dependencies": {
"jade-package": "^2.3.4"
}
這其中的 ^ 是定義了向后(新)兼容依賴；在 npm<5.0 以前，如果 jade-package 的版本超過2.3.4，并在大版本號（2）上相同，就允許下載最新版本的 jade-package 庫包，例如實際上可能運行npm i時候，下載的具體版本可能是2.5.8。
多數情況下，這種向后兼容依賴下載最新庫包，是沒有問題的；然而，因為 npm 是開源世界，各庫包的版本語義可能并不相同，不是所有開發者都能嚴格遵守這一原則：相同大版本號的同一個庫包，其接口符合兼容要求。而且，不同的庫包之間也存在其他依賴。理想狀態下使用語義化版本發布補丁不會包含大的變化，但不幸的是這必非真理。npm 的這種策略，有可能導致兩臺擁有相同 package.json 文件的機子，實際上安裝了不同版本的包，這可能導致一些錯誤。有時候，相同機器稍不留神的一個 npm i，就可能導致 node_modules 中安裝的實際依賴被更新，也就可能導致項目運行呈現，被面目全非。
yarn.lock 就是為解決此問題而衍生的存在；為了跨機器安裝得到一致的結果，Yarn 需要比你配置在 package.json 中的依賴列表更多的信息。 Yarn 需要準確存儲每個安裝的依賴是哪個版本；它類似于 npm 的 npm-shrinkwrap.json，并且無副作用。只是需要注意的是：
yarn.lock文件是自動產生的，而且應該完全被Yarn管理。 當你用 Yarn CLI 增加／升級／刪除依賴，它將自動更新你的yarn.lock文件。 不要直接編輯這個文件，那樣很容易弄壞某些東西。
關于 package-lock.json
當 Node.js 升級之 v8.0 以后，自帶的 npm 也升級到了5.0；帶來速度上很大提升之外，也帶來了其他很大變大；這其中就包括 package-lock.json：安裝模塊操作（改變 node_modules 文件夾內容）會生成或更新 package-lock.json 文件；package-lock.json 之于 npm，即是yarn.lcok 之于 yarn 的翻版；更多信息可參見 npm package-lock.json。
另外，值得一提的是，在 Github 上有人專門提供了 Synp 工具，用以：將yarn.lock轉換為package-lock.json，反之亦然（Convert yarn.lock to package-lock.json and vice versa）。
對比 npm，yarn 的優點
- 速度快 。速度快主要來自以下兩個方面：
- 并行安裝：無論
npm還是yarn在執行包的安裝時，都會執行一系列任務。npm是按照隊列執行每個package，也就是說必須要等到當前package安裝完成之后，才能繼續后面的安裝。而yarn是同步執行所有任務，提高了性能。 - 離線模式：如果之前已經安裝過一個軟件包，用
yarn再次安裝時之間從緩存中獲取，就不用像npm那樣再從網絡下載了。
安裝版本統一：為了防止拉取到不同的版本，
yarn有一個鎖定文件 (lock file) 記錄了被確切安裝上的模塊的版本號。每次只要新增了一個模塊，yarn就會創建（或更新）yarn.lock 這個文件。這么做就保證了，每一次拉取同一個項目依賴時，使用的都是一樣的模塊版本。更簡潔的輸出：
npm的輸出信息比較冗長。在執行 npm install <package> 的時候，命令行里會不斷地打印出所有被安裝上的依賴。相比之下，yarn簡潔太多：默認情況下，結合了emoji直觀且直接地打印出必要的信息，也提供了一些命令供開發者查詢額外的安裝信息。多注冊來源處理：所有的依賴包，不管他被不同的庫間接關聯引用多少次，安裝這個包時，只會從一個注冊來源去裝，要么是
npm要么是bower, 防止出現混亂不一致。更好的語義化：
yarn改變了一些npm命令的名稱，比如 yarn add/remove，感覺上比 npm 原本的 install/uninstall 要更清晰。
小結
對比后發現，似乎yarn在各方面全面領先于npm。事實上，在npm5之前，yarn的優勢特別明顯。但是在npm5改進之后，二者差距不大， npm5值得嘗試！
綜上個人的建議：如果你已經在個人項目上使用 yarn，并且沒有遇到更多問題，目前完全可以繼續使用。但如果有兼容 npm 的場景，或者身處在使用 npm，cnpm 的團隊，以及還沒有切到 yarn 的項目，那現在就可以試一試 npm5 了。
友情鏈接：使用淘寶鏡像提高安裝速度
更多文章：猜你感興趣
原文出處：Npm vs Yarn 之備忘詳單
