簡單讹剔、好用的pnpm吝岭，快到碗里來

高效利用磁盤空間

假如磁盤中有五個vue@2.7項目穆碎，當進行npm install的時候槽惫，node_modules 中會存放一個2.5Mb大小的包先蒋，五個項目就會存放5個2.5Mb的包骇钦。
使用pnpm的話，五個項目只會占有2.5Mb的包竞漾。

首先它會在磁盤根目錄創(chuàng)建一個 ~/.pnpm-store 文件夾眯搭，用于統(tǒng)一存放管理依賴，依賴安裝完成后业岁，然后到項目中的node_modules/.pnpm中生成依賴包的硬鏈接鳞仙，再通過軟鏈接的方式把對應的依賴包軟鏈接到 node_modules，因此我們節(jié)約磁盤空間并提升安裝速度叨襟。

https://pnpm.io/motivation#saving-disk-space-and-boosting-installation-speed

pnpm-pen

解決依賴分身

當我們有一個這樣的項目：

└── node_modules
    ├── A
        └── node_modules
            └── Z@1.0.0
    └── B
        └── node_modules
            └── Z@2.0.0
    └── C
        └── node_modules
            └── Z@2.0.0
├── package.json
└── yarn.lock

使用npm < 3：
在安裝依賴包之后繁扎，會將依賴以樹形結構存儲在 node_modules 中，子依賴會繼續(xù)安裝到依賴的node_modules中，以此循環(huán)梳玫。這種方式會重復安裝項目的包到不同的路徑下爹梁，造成磁盤空間浪費，同時過深的層級在windows下會造成無法直接刪除的問題提澎。

npm<3

使用npm > 3 or yarn：
npm為了重復安裝包和層級過深的問題姚垃，npm3和yarn使用了扁平化依賴的方式來解決問題。
通過將依賴拍平到node_modules下盼忌，配合node require 機制向上查找需要的包积糯。這個方案解決了重復包安裝到問題以及層級過深的問題，但同時帶來了幻影依賴問題谦纱。

npm>=3oryarn

使用pnpm：
pnpm 巧妙的通過硬鏈接 + 軟鏈接結合的方式看成，實現(xiàn)了樹結構的 node_modules，并解決了依賴幻影跨嘉、依賴分身和層級過深的問題川慌。

pnpm

解決幽靈依賴

使用npm>=3或者yarn進行依賴安裝時，會使用扁平化的方式進行依賴管理祠乃。
當我們yarn add vite時梦重，node_moduels 目錄結構會是這樣的，這時候我們在項目中`import 'esbuild' 代碼不會報錯(not cool)亮瓷。

├── node_modules
│   ├── esbuild
│   ├── esbuild-darwin-64
│   ├── fsevents
│   ├── function-bind
│   ├── has
│   ├── is-core-module
│   ├── nanoid
│   ├── path-parse
│   ├── picocolors
│   ├── postcss
│   ├── resolve
│   ├── rollup
│   ├── source-map-js
│   ├── supports-preserve-symlinks-flag
│   └── vite
├── package.json
└── yarn.lock

當我們pnpm add vite時琴拧，node_moduels 目錄結構會是這樣的，這時候我們在項目中import 'esbuild' 代碼會報錯嘱支，找不到 esbuild蚓胸。

└── node_modules
    ├── .bin
    ├── .pnpm
    │   ├── esbuild-darwin-64@0.14.49
    │   ├── esbuild@0.14.49
    │   ├── fsevents@2.3.2
    │   ├── function-bind@1.1.1
    │   ├── has@1.0.3
    │   ├── is-core-module@2.9.0
    │   ├── nanoid@3.3.4
    │   ├── node_modules
    │   ├── path-parse@1.0.7
    │   ├── picocolors@1.0.0
    │   ├── postcss@8.4.14
    │   ├── resolve@1.22.1
    │   ├── rollup@2.77.0
    │   ├── source-map-js@1.0.2
    │   ├── supports-preserve-symlinks-flag@1.0.0
    │   └── vite@3.0.2
    └── vite -> .pnpm/vite@3.0.2/node_modules/vite ->  軟連接

總結

隨著vue3、vite倉庫和vue生態(tài)項目也切換到了pnpm斗塘，我也嘗試了一段時間赢织。把個人項目都遷移到了pnpm生態(tài)上，遷移成本低馍盟，好上手于置，速度快、體積小贞岭，真香八毯，希望pnpm越發(fā)普及！

如果老的項目依賴存在幽靈依賴導致無法正常運行瞄桨，可以毫不羞恥的在項目 .npmrc 里寫一行 shamefully-hoist=true话速。

拓展閱讀 & 參考資料

pnpm 官方文檔
node_modules 困境
遷移常見的問題
為什么 vue 源碼以及生態(tài)倉庫要遷移 pnpm?
開發(fā)腳手架可以參考一下vite的pr