npm和yarn的區別，咱們該如何選擇?

首先，這兩個都屬於js包管理工具，均可以安裝包或者模塊
yarn 是由facebook、google等聯合開發推出的
區別：

npm 下載包的話 好比npm install
它是按照包的排序，也就是隊列挨個下載，一個下載完成後，再下載另外一個
yarn是將要下載的包進行同時下載
yarn 在下載模塊或包時，命令行輸出的信息更加簡潔
npm版本5.0 以後，會自帶package.lock.json 文件，該文件主要描述了你項目中安裝的包都是哪個版本，你再進行npm install 的話，會安裝指定版本的包。
yarn 一直都有lock 文件，功能和npm 的package.lock.json差很少。
命令不一樣
npm install == yarn
npm isntall vue == yarn add vue
npm uninstall vue == yarn remove vue
npm update == yarn upgrade

按照以往，個人步驟都是：

git clone xxx
npm install
npm run dev

這時，JJ給我來了下面一段

git clone xxx
yarn
yarn start

「咦，yarn是什麼鬼？難道npm更高級的替代品？爲何要替代npm？難道有什麼好的地方？」，心裏一連串的問題冒出來。我就默默的問了一下JJ：「yarn是跟npm同樣的東西嗎？」，「嗯。」JJ忙碌的敲着鍵盤，顯然這個問題不值得繼續問下去了。我也默默的把剛纔腦子裏一連串的問題記了下來。

Yarn是什麼？

「Yarn是由Facebook、Google、Exponent 和 Tilde 聯合推出了一個新的 JS 包管理工具 ，正如官方文檔中寫的，Yarn 是爲了彌補 npm 的一些缺陷而出現的。」這句話讓我想起了使用npm時的坑了：

• npm install的時候巨慢。特別是新的項目拉下來要等半天，刪除node_modules，從新install的時候依舊如此。
• 同一個項目，安裝的時候沒法保持一致性。因爲package.json文件中版本號的特色，下面三個版本號在安裝的時候表明不一樣的含義。

"5.0.3",
"~5.0.3",
"^5.0.3"

「5.0.3」表示安裝指定的5.0.3版本，「～5.0.3」表示安裝5.0.X中最新的版本，「^5.0.3」表示安裝5.X.X中最新的版本。這就麻煩了，經常會出現同一個項目，有的同事是OK的，有的同事會因爲安裝的版本不一致出現bug。

• 安裝的時候，包會在同一時間下載和安裝，中途某個時候，一個包拋出了一個錯誤，可是npm會繼續下載和安裝包。由於npm會把全部的日誌輸出到終端，有關錯誤包的錯誤信息就會在一大堆npm打印的警告中丟失掉，而且你甚至永遠不會注意到實際發生的錯誤。

帶着這些坑，我開始瞭解Yarn的優點及其解決的問題。

Yarn的優勢？

• 速度快。速度快主要來自如下兩個方面：

1. 並行安裝：不管 npm 仍是 Yarn 在執行包的安裝時，都會執行一系列任務。npm 是按照隊列執行每一個 package，也就是說必需要等到當前 package 安裝完成以後，才能繼續後面的安裝。而 Yarn 是同步執行全部任務，提升了性能。
2. 離線模式：若是以前已經安裝過一個軟件包，用Yarn再次安裝時之間從緩存中獲取，就不用像npm那樣再從網絡下載了。

• 安裝版本統一：爲了防止拉取到不一樣的版本，Yarn 有一個鎖定文件 (lock file) 記錄了被確切安裝上的模塊的版本號。每次只要新增了一個模塊，Yarn 就會建立（或更新）yarn.lock 這個文件。這麼作就保證了，每一次拉取同一個項目依賴時，使用的都是同樣的模塊版本。npm 其實也有辦法實現到處使用相同版本的 packages，但須要開發者執行 npm shrinkwrap 命令。這個命令將會生成一個鎖定文件，在執行 npm install 的時候，該鎖定文件會先被讀取，和 Yarn 讀取 yarn.lock 文件一個道理。npm 和 Yarn 二者的不一樣之處在於，Yarn 默認會生成這樣的鎖定文件，而 npm 要經過 shrinkwrap 命令生成 npm-shrinkwrap.json 文件，只有當這個文件存在的時候，packages 版本信息纔會被記錄和更新。
• 更簡潔的輸出：npm 的輸出信息比較冗長。在執行 npm install <package> 的時候，命令行裏會不斷地打印出全部被安裝上的依賴。相比之下，Yarn 簡潔太多：默認狀況下，結合了 emoji直觀且直接地打印出必要的信息，也提供了一些命令供開發者查詢額外的安裝信息。
• 多註冊來源處理：全部的依賴包，無論他被不一樣的庫間接關聯引用多少次，安裝這個包時，只會從一個註冊來源去裝，要麼是 npm 要麼是 bower, 防止出現混亂不一致。
• 更好的語義化： yarn改變了一些npm命令的名稱，好比 yarn add/remove，感受上比 npm 本來的 install/uninstall 要更清晰。

Yarn和npm命令對比

npm	yarn
npm install	yarn
npm install react --save	yarn add react
npm uninstall react --save	yarn remove react
npm install react --save-dev	yarn add react --dev
npm update --save	yarn upgrade

npm的將來：npm5.0

有了yarn的壓力以後，npm作了一些相似的改進。

1. 默認新增了相似yarn.lock的 package-lock.json；
2. git 依賴支持優化：這個特性在須要安裝大量內部項目（例如在沒有自建源的內網開發），或須要使用某些依賴的未發佈版本時頗有用。在這以前可能須要使用指定 commit_id 的方式來控制版本。
3. 文件依賴優化：在以前的版本，若是將本地目錄做爲依賴來安裝，將會把文件目錄做爲副本拷貝到 node_modules 中。而在 npm5 中，將改成使用建立 symlinks 的方式來實現（使用本地 tarball 包除外），而再也不執行文件拷貝。這將會提高安裝速度。目前yarn還不支持。

總結

在npm5.0以前，yarn的優點特別明顯。可是在npm以後，經過以上一系列對比，咱們能夠看到 npm5 在速度和使用上確實有了很大提高，值得嘗試，不過尚未超過yarn。

綜上我我的的建議是若是你已經在我的項目上使用 yarn，而且沒有遇到更多問題，目前徹底能夠繼續使用。但若是有兼容 npm 的場景，或者身處在使用 npm，cnpm，tnpm 的團隊，以及尚未切到 yarn 的項目，那如今就能夠試一試 npm5 了。

參考文章

原文：https://blog.csdn.net/weixin_39458031/article/details/86254375
原文連接：https://www.jianshu.com/p/254794d5e741