一位用不好包管理器的前端，是一個入門級前端，一個用不好webpack的前端，是一個初級前端
三個包管理器是可以一起用的，只要你夠膽大心細，就沒任何問題！
在javeScript編寫中,我們盡量不要定義全局變量，封裝函數盡量不要有副作用,因為全部變量的查詢時間會比局部變量的查詢慢,更是考慮在Node的環境中無法被垃圾回收的問題
老規矩 先看原理
npm
npm是Node.js能夠如此成功的主要原因之一。npm團隊做了很多的工作，以確保 npm 保持向后兼容，并在不同的環境中保持一致。npm是圍繞著 語義版本控制（semver）的思想而設計。
給定一個版本號：主版本號.次版本號.補丁版本號， 以下這三種情況需要增加相應的版本號：
主版本號： 當API發生改變，并與之前的版本不兼容的時候
次版本號： 當增加了功能，但是向后兼容的時候
補丁版本號：當做了向后兼容的缺陷修復的時候
npm 2會安裝每一個包所依賴的所有依賴項。如果我們有這么一個項目，它依賴項目A，項目A依賴項目B，項目B依賴項目C，那么依賴樹將如下所示：這個結構可能會很長。這對于基于Unix的操作系統來說只不過是一個小煩惱，但對于Windows來說卻是個破壞性的東西，因為有很多程序無法處理超過260個字符的文件路徑名。
npm 3采用了扁平依賴關系樹來解決這個問題，所以我們的3個項目結構現在看起來如下所示：
存了已經下載的每個版本的壓縮包。本地緩存的內容可以通過npm cache ls命令進行查看。本地緩存的設計有助于減少安裝時間。
[圖片上傳失敗...(image-5457e5-1559035973365)]
- 這樣，一個原來很長的文件路徑名就從
./node_modules/package-A/node_modules/package-B/node-modules/some-file-name-in-package-c.js變成了/node_modules/some-file-name-in-package-c.js。 - 這種方法的缺點是，
npm必須首先遍歷所有的項目依賴關系，然后再決定如何生成扁平的node_modules目錄結構。npm必須為所有使用到的模塊構建一個完整的依賴關系樹，這是一個耗時的操作，是npm安裝速度慢的一個很重要的原因。 - 想當然的以為每次運行
npm install命令時，NPM都得從互聯網上下載所有內容。 - 但是，
npm是有本地緩存的，它保存了已經下載的每個版本的壓縮包。本地緩存的內容可以通過npm cache ls命令進行查看。本地緩存的設計有助于減少安裝時間。
cnpm
-
cnpm跟npm用法完全一致，只是在執行命令時將npm改為cnpm。 -
npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，如果npm的服務器在中國就好了，于是淘寶團隊干了這事。來自官網：“這是一個完整npmjs.org鏡像，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘 一次以保證盡量與官方服務同步?！?/li> - 官方地址：
http://npm.taobao.org - 安裝：
npm install -g cnpm --registry=https://registry.npm.taobao.org
Yarn
-
Yarn一開始的主要目標是解決上一節中描述的由于語義版本控制而導致的npm安裝的不確定性問題。雖然可以使用npm shrinkwrap來實現可預測的依賴關系樹，但它并不是默認選項，而是取決于所有的開發人員知道并且啟用這個選項。 -
Yarn采取了不同的做法。每個yarn安裝都會生成一個類似于npm-shrinkwrap.json的yarn.lock文件，而且它是默認創建的。除了常規信息之外，yarn.lock文件還包含要安裝的內容的校驗和，以確保使用的庫的版本相同。 - yarn是經過重新設計的嶄新的npm客戶端，它能讓開發人員并行處理所有必須的操作，并添加了一些其他改進。
- 運行速度得到了顯著的提升，整個安裝時間也變得更少
- 像npm一樣，yarn使用本地緩存。
與npm不同的是，yarn無需互聯網連接就能安裝本地緩存的依賴項，它提供了離線模式。 - 允許合并項目中使用到的所有的包的許可證
- 通常情況下不建議通過npm進行安裝。npm安裝是非確定性的，程序包沒有簽名，并且npm除了做了基本的SHA1哈希之外不執行任何完整性檢查，這給安裝系統程序帶來了安全風險。(作者曾經在一個上百個依賴包的項目中使用
npm丟包過，代價非常大，淚水不自覺掉下來)
首先看一次非常失敗的包下載 竟然是從全局讀取的資源(不配置
webpack別名是因為就這一個路徑這么長)
[圖片上傳失敗...(image-5e86ef-1559035973365)]
首先我們從原理入手 ，我們使用
npm init,yarn init,cnpm init的時候 發生了什么 ？
- 生成
package.json文件 -
json文件內部聲明初始的版本信息、作者信息等，如果你是需要上傳到npm上作為命令行工具，應該配置bin等聲明入口字段
那么當我們使用
npm i,yarn add,cnpm i操作時候會發生什么 ？
- 首先會根據你的命令行后綴是否加了
-g或者global判斷，下載的包是放在全局的環境，還是當前package.json文件對應的node_module文件夾目錄下(這點尤其重要，有人出BUG，就是因為在用npm,cnpm時候沒有注明添加的是全局依賴還是本地依賴，導致json文件上沒有對應的包名，項目永遠起不來) - 然后根據你的指令
--save或者-D、--save -dev判斷是開發依賴還是線上依賴，其實這點在yarn上沒有問題，因為yarn有自己的一套檢查包完整性的機制，不會丟包，還會自動判斷添加依賴，出bug一般是cnpm和npm，沒有明確-g或者--save，npm只有檢查程序員簽名的機制，沒有檢查包完整性的機制，也不會自動添加依賴到json文件，那么就會出現丟包的假象，所以建議主要使用yarn
yarn和npm對比
[圖片上傳失敗...(image-d6d78b-1559035973364)]
npm的缺點匯總：
- 同一個項目，安裝的時候無法保持一致性。由于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的優點
- 速度快 。速度快主要來自以下兩個方面：
- 并行安裝：無論
npm還是Yarn在執行包的安裝時，都會執行一系列任務。npm是按照隊列執行每個package，也就是說必須要等到當前package安裝完成之后，才能繼續后面的安裝。而Yarn是并行執行所有任務，提高了性能。
離線模式：如果之前已經安裝過一個軟件包，用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 publish ，你怎么上傳包到npm? 你不用cnpm，是下載不了一些包的
搞清楚三者下載包（依賴）的本質結果：
- 首先向對應的
node_module文件夾下面下載包（如果你非要下到全局，那么再見） - 再然后是
json文件中添加對應的依賴字段,確定是線上依賴還是開發依賴 - 只要做到這兩者 你就下包成功
- 總結就是 只要結果 過程管你是啥
使用
yarn下載過的包，再使用npm cnpm下載 會重復下載，刪除之前的包
-
puppeteer這個包所依賴的mini版谷歌瀏覽器使用cnpm下載就可以完美解決 -
prerender-spa-plugin這個包依賴上面的木偶戲 puppeteer這個包，也可以用cnpm下載 - 混合使用包管理器切記，不要重復下載依賴，
npm cnpm下載依賴，一定要添加注明是什么依賴，是否全局安裝 -
yarn和npm i兩者，選擇前者，原因在上面有提到，總體來說，yarn是不二選擇，但是其他兩者也不可缺少，比如electron這個依賴，使用cnpm就可以完美一鍵安裝
只要膽大心細，就可以把三者用得如魚得水，不然就會被按在地上摩擦，實踐過程踩坑也是正常 覺得寫得好別忘了關注我的專欄，給個贊再走~
