聊聊前端包管理器對比Npm、Yarn和Pnpm
前言
本文將從前端包管理器的發展開始說起，然后對比npm、yarn和pnpm。
沒有包管理器
依賴(dependency)是別人為了解決一些問題而寫好的代碼，即我們常說的第三方包或三方庫。
一個項目或多或少的會有一些依賴，而你安裝的依賴又可能有它自己的依賴。
比如，你需要寫一個base64編解碼的功能，你可以自己寫，但為什么要自己造輪子呢?大多數情況下，一個可靠的第三方依賴經過多方測試，兼容性和健壯性會比你自己寫的更好。
項目中的依賴，可以是一個完整的庫或者框架，比如react或vue;可以是一個很小的功能，比如日期格式化;也可以是一個命令行工具，比如eslint。
如果沒有現代化的構建工具，即包管理器，你需要用<script>標簽來引入依賴。
此外，如果你發現了一個比當前使用的依賴更好的庫，或者你使用的依賴發布了更新，而你想用最新版本，在一個大的項目中，這些版本管理、依賴升級將是讓人頭疼的問題。
于是包管理器誕生了，用來管理項目的依賴。
它提供方法給你安裝依賴(即安裝一個包)，管理包的存儲位置，而且你可以發布自己寫的包。
npm v1-v2
初代npm(Node.js Package Manager)隨著Node.js的發布出現了。
它的文件結構是嵌套的：
這會導致3個問題：
1、node_modules體積過大(大量重復的包被安裝)
2、node_modules嵌套層級過深(會導致文件路徑過長的問題)
3、模塊實例不能共享
yarn & npm v3
這個版本yarn和npm v3帶來了扁平化依賴管理：
扁平化處理時，比如安裝A，A依賴B和C，C依賴D和E，就把A~E全部放到node_modules目錄下，從而解決上個版本中node_modules嵌套層級過深的問題。
在install安裝時，會不停的往上級node_modules中尋找，如果找到同樣的包，就不再重復安裝，從而解決了大量包被重復安裝的問題。
但是扁平化帶來了新的問題：
1、依賴結構的不確定性
2、扁平化算法本身復雜性很高，耗時較長
3、項目中仍然可以非法訪問沒有聲明過依賴的包
對于問題1，比如B和C都依賴了F，但是依賴的F版本不一樣：
依賴結構的不確定性表現是扁平化的結果不確定，以下2種情況都有可能，取決于package.json中B和C的位置。
于是出現yarn.lock(npm5才有package-lock.json)，來保證install后產生確定的依賴結構。但這并不能完全解決問題，node_modules中依然存在各種不同版本的F，而這可能導致各種情況的編譯報錯，以及安裝滿，占磁盤空間。
對于問題3，package.json中我們只聲明了A，B~F都是因為扁平化處理才放到和A同級的node_modules下，理論上在項目中寫代碼時只可以使用A，但實際上B~F也可以使用，由于扁平化將沒有直接依賴的包提升到node_modules一級目錄，Node.js沒有校驗是否有直接依賴，所以項目中可以非法訪問沒有聲明過依賴的包。
這會產生兩個問題：
- B~F中的包升級后，項目可能出問題
- 額外的管理成本(比如協作時別人運行一次npm install后項目依舊跑不起來)
pnmp
pnpm(Performance npm)的作者Zoltan Kochan發現 yarn 并沒有打算去解決上述的這些問題，于是另起爐灶，寫了全新的包管理器。
pnpm復刻了npm所有的命令，所以使用方法和npm一樣，并且在安裝目錄結構上做了優化，特點是善用鏈接，且由于鏈接的優勢，大多數情況下pnpm的安裝速度比yarn和npm更快。
比如安裝A，A依賴了B：
1、安裝依賴
A和B一起放到.pnpm中(和上面相比，這里沒有耗時的扁平化算法)。
另外A@1.0.0下面是node_modules，然后才是A，這樣做有兩點好處：
- 允許包引用自身
- 把包和它的依賴攤平，避免循環結構
2、處理間接依賴
A平級目錄創建B，B指向B@1.0.0下面的B。
3、處理直接依賴
頂層node_modules目錄下創建A，指向A@1.0.0下的A。
對于更深的依賴，比如A和B都依賴了C：
總結
如果你想更快的速度，更小的空間，你應該選擇pnpm;
如果你要用Monorepo，你可以用yarn或pnpm;
如果是node項目，你應該用npm，因為這是node官方推薦的，而且yarn不支持node5+;
對于npm項目，如果你擔心項目的安全性，你可以考慮用yarn替換npm。
參考
1、為什么現在我更推薦 pnpm 而不是 npm/yarn?(
https://www.cnblogs.com/cangqinglang/p/14448329.html)
2、Node.js 包管理器發展史(
https://wxsm.space/2021/npm-history/)
3、JavaScript package managers compared: Yarn, npm, or pnpm?(
https://blog.logrocket.com/javascript-package-managers-compared/)
3、pnpm官網(https://pnpm.io/)
