Npm vs Yarn 之備忘大全

有則笑話，如此講到：「老丈人愛吃核桃，昨天買了二斤陪妻子送去，老丈人年輕時練過武，用手一拍核桃就碎了，笑着對我說：你還用錘子，你看我用手就成。我嘴一抽，來了句：人和動物最大的區別就是人會使用工具。……」。撇開這樣特例場景，這句話仍是很是用有道理的；畢竟從遠古石器時期或更早，到現在，所言之語，所穿之衣，代步之車，所學的知識，所曉的常識.....皆是工具；能夠說絕大部分人之間的差別(天才級除外)，僅在於工具使用之優劣罷了。在工具的使用中，不少人極大程度上停留於會用層面，如若不遇到問題，幾乎就處於停滯；這自己倒也沒有問題，但可能由於沒有透徹的瞭解，而錯失了對該物能夠擁有的想象力，從而錯過了許多本該有的美好，如此的惋惜。

坦白說，在從事前端方面工做，蠻長一段時間內，就因缺少對 Npm 有足夠的認知，使得後來對其諸多訊息，頗感「相見恨晚」；在本篇中，將客觀陳述 Npm 與 Yarn 的各自功用，以此顯出二者間的差別；同時，以比較的形式，列出「經常使用命令清單」，以方便使用之時，做爲參考(將陸續更新以完善)；同時也欲藉此，再次倡導那經典名言：「工欲善其事，必先利其器」，與諸君共勉。

原文出處：晚晴幽草軒
原文首鏈：Npm vs Yarn 之備忘詳單

什麼是 Npm，Yarn

什麼是 npm？

npm 即：npm package manager，是一種重用其餘開發人員的代碼的方法，也是一種與他人共享代碼的方式，而且能夠很容易地管理不一樣版本的代碼。npm 開始做爲 Node 包管理器，因此你會發現不少模塊能夠在服務器端使用。也有不少的包添加命令供您在命令行中使用。你還會發現能夠在前端使用的軟件包。

npm 由三個不一樣的部分組成：網站，註冊表和 CLI 。該網站是用戶發現軟件包的主要工具，註冊表是一個關於軟件包信息的大型數據庫，而 CLI 則是開發者如何在註冊表上發佈他們的軟件包或下載他們但願安裝的軟件包。更多詳細內容，可參見 what-is-npm。

什麼是 yarn？

Yarn 對你的代碼來講是一個包管理器， 你能夠經過它使用全世界開發者的代碼，或者分享本身的代碼。 Yarn 作這些快捷、安全、可靠，因此你不用擔憂什麼。經過 Yarn，你可使用其餘開發者針對不一樣問題的解決方案，使本身的開發過程更簡單。 使用過程當中遇到問題，你能夠將其上報或者貢獻解決方案。一旦問題被修復，Yarn會更新保持同步。

Yarn 是 Facebook, Google, Exponent 和 Tilde 開發的一款新的 JavaScript 包管理工具。它並無試圖徹底取代 npm。Yarn 一樣是一個從 npm 註冊源獲取模塊的新的 CLI 客戶端。註冊的方式不會有任何變化 —— 你一樣能夠正常獲取與發佈包。它存在的目的是解決團隊在使用 npm 面臨的少數問題。固然，在 Node 版本斷更替中，Npm 自己也在積極更新。

關於安裝/更新

如何安裝/更新 Npm

如何安裝 Npm

npm 開始做爲 Node 包管理器，因此它的安裝是跟 Node.js 捆綁在一塊兒的。至於如何安裝 Node.js, Npm 官方，在 Installing Node.js and updating npm 作了闡述。以前在不一樣平臺嘗試更新 Node.js 之時，也是遇到過各類問題，有在 NodeJs 升級/安裝摺騰記 一文作了記載；折騰許久，得出的結論跟官網一致：

若是您使用的是OS X或Windows，安裝Node.js的最佳方法是：使用 Node.js下載頁面中的一個安裝程序。(筆者微注：如是我中國大陸用戶，去淘寶 Node.js 鏡像下載，會是快速的法子)。

如何更新 Npm

1. npm install npm@latest -g （npm install npm -g）
2. 更新(從新下載) Node.js

如何安裝 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

對於如何更新 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	yarn info	顯示一個包的信息

對於以上還須對於，還須作以下補充性說明：

• 在 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 config set registry http://registry.npm.taobao.org
  yarn config set registry http://registry.npm.taobao.org

  固然也能夠設置別名 cnpm：

  alias cnpm="npm --registry=http://registry.cnpmjs.org --cache=$HOME/.npm/.cache/cnpm"

Yarn 獨有的命令

• yarn import：依據原npm安裝後的node_modules目錄生成一份yarn.lock文件；
• yarn licenses：列出已安裝包的許可證信息；
• yarn pack：建立一個壓縮的包依賴 gzip 檔案；
• yarn why：顯示有關一個包爲什麼被安裝的信息。
• yarn autoclean：從包依賴裏清除並移除不須要的文件。
• ......

npm 使用之額外技巧

如何尋找適宜的 npm 包

找到合適的軟件包可能至關具備挑戰性 ——，畢竟有成千上萬個模塊供你選擇。https://npms.io/ ，這個網站的存在，讓這項任務輕鬆不少；它顯示了質量，受歡迎程度和維護等指標。這些計算是基於模塊是否具備過期的依賴關係，是否配置了linters，是否包含測試或是否進行了最近的提交。

執行 npm 包的二進制文件

顯而易見，經由 npm 或是 yarn 安裝，並被放置在 ./node_modules 目錄中的包，其二進制可執行文件可訪問 ./node_modules/.bin，那麼該如何從項目根目錄中調用它呢？如下提供了幾種方式，你能夠從中任意選擇一種，來達到你的目的：

爲了方便舉例，這裏以運行 responsive-email-template（製做更好的響應式郵件模板）做爲示例來做說明；其中有用到 mjml 這個庫；此庫被推薦的方式是在本地安裝和使用；因此，要運行對應命令，你能夠操做她，使用如下辦法：

• 古老而原始的辦法

在你安裝 MJML 的文件夾中，你如今能夠運行：

./node_modules/.bin/mjml --watch src/index.mjml -o dist/index.html

• 將 ./node_modules/.bin/ 添加至環境變量

export PATH="$PATH:./node_modules/.bin"
mjml --watch src/index.mjml -o dist/index.html

• 或者使用快捷鍵 npm bin

$(npm bin)/mjml --watch src/index.mjml -o dist/index.html

• 或者利用 npm 腳本命令

// 將命令配置在 package.json 文件，使用 scripts 字段定義腳本命令
"scripts": {
  "mjml": "mjml --watch src/index.mjml -o dist/index.html"
}

// 使用之時，只需運行以下命令便可：
npm run mjml

• 或者經過使用 npx

注意：npx 包含在 npm > v5.2，或能夠分開安裝。

# npm install -g npx
npx mjml --watch src/index.mjml -o dist/index.html

強大如斯，npm 腳本

npm（Yarn 亦同）容許在 package.json 文件裏面，使用 scripts 字段定義腳本命令。它支持通配符、變量、鉤子、外部傳參、支持併發 & 異步執行等等；因此，徹底能夠藉助 npm script，打造屬於本身的高效工做流。鑑於篇幅，這部分就不在這裏多作贅述，具體使用以及運行原理等，能夠參見 @阮一峯 所寫的文章：npm scripts 使用指南。

具體例子來講，有些時候會有需求要刪除 Git 倉庫全部提交歷史，而保留代碼爲當前狀態；而刪除 .git 文件夾可能會致使您的 git 存儲庫中的問題；因此可使用另外一種更爲安全的辦法：詳見如何刪除 Git 倉庫全部提交歷史記錄。但這個操做一套打下來，難免勞神費力。那麼藉助 npm script，運行以下命令，一鍵搞定（固然命令可自行定義）；若是你有需求執行更多，也能夠在後面追加更多操做。

"scripts": {
  "clean-commit": "git checkout --orphan latest_branch && git add -A && git commit -am 'clean past commit history 😊' && git branch -D master && git branch -m master && git push -f origin master"
}

// 或者也能夠將其做下拆解，譬如像這樣：
"scripts": {
  "recommit": "git add -A && git commit -am 'clean past commit history 😊'",
  "repush": "git branch -D master && git branch -m master && git push -f origin master",
  "clean-commit": "git checkout --orphan latest_branch && npm run recommit && repush"
}

如何探查 npm 包

一旦咱們選擇了咱們的模塊，咱們應該看看文檔，並檢查開放的問題，以更好地瞭解咱們將要在咱們的應用程序中須要什麼。不要忘記，您使用的 npm 包越多，存在易受攻擊或惡意攻擊的風險就越高。

若是你想從cli打開模塊的主頁，你能夠這樣作：

npm home axios

要檢查未決的問題或公開的路線圖（若是有的話），你能夠試試這個：

npm bugs axios

另外，若是你只是想檢查模塊的 git 倉庫，請輸入：

npm repo axios

關於 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 獲贊頗多。用其能夠方便生成鎖文件，安裝依賴很是迅速，且會自動添加進 package.json，同時安裝與使用 Yarn 的成本也極小，這使得 Yarn 能夠完美替代 npm。yarn 之於 npm，有點像當年的 io.js 和 node.js，異曲同工，都是爲了進一步解放和優善生產力；現在，在 Yarn 的影響下，npm 自己也改善很多(version >= 5.0)。最後要說的是，無論用何種工具，全面瞭解其全貌，知其優曉其劣，方能更好駕馭它，使之爲本身高效、快意的生活增姿添色。

@2017-12-30 於深圳.南山 Last Modify： 2018-01-02

---

您可能會感興趣的文章：

• Vimium~讓您的Chrome起飛
• 那些所倚靠的利器記載
• Win下最愛效率神器:AutoHotKey
• Win下必備神器之Cmder
• 新編碼神器Atom使用紀要
• sublime text 下的Markdown寫做
• SublimeText下寫做利器之MarkdownEditing
• Mac必備軟件漸集之ZSH－終極Shell