Hello，大家好，我是 Sunday

包管理工具是前端開發(fā)中的重要一環(huán)，但是現(xiàn)在前端的包管理工具有很多。很多新同學(xué)很難搞清這么多不同的包管理工具之間的差異，所以說(shuō)，咱們今天就針對(duì) npm、yarn、pnpm、cnpm 來(lái)進(jìn)行下統(tǒng)一的介紹，幫大家梳理清楚這些包管理工具的區(qū)別！

npm：當(dāng)之無(wú)愧的老大哥

說(shuō)起前端的包管理工具，就不得不提 npm ——全稱 Node Package Manager，是 Node.js 官方自帶的包管理器，也是前端構(gòu)建工具鏈的基礎(chǔ)之一。

npm 最初誕生于 2010 年，當(dāng)時(shí)隨著 Node.js 的流行而快速崛起，它解決了 JavaScript 社區(qū)長(zhǎng)期以來(lái)的代碼共享難題 —— 你不再需要手動(dòng)復(fù)制粘貼 JS 代碼片段，而是可以直接通過(guò)一個(gè)命令安裝和管理第三方模塊。

在那個(gè)前端還靠一手 jQuery 打天下的年代，npm 在當(dāng)年絕對(duì)是一種全新的概念。

npm 包含了如下核心功能：

• 依賴安裝：npm install 一鍵安裝項(xiàng)目所需模塊
• 版本管理：通過(guò) package.json 和 package-lock.json 管理依賴版本
• 模塊發(fā)布：可將自己的代碼發(fā)布到 npm 倉(cāng)庫(kù)（registry），供他人使用
• 腳本系統(tǒng)：支持 npm run 執(zhí)行構(gòu)建、測(cè)試等命令，成為項(xiàng)目自動(dòng)化的入口

只不過(guò)，最為最初的包管理工具，npm 一開始（當(dāng)然也包括現(xiàn)在）也存在非常多的問(wèn)題，比如說(shuō)：安裝慢、node_modules 過(guò)大、依賴庫(kù)版本鎖定不一致 等等的問(wèn)題。

雖然，npm 在 v5 之后，進(jìn)行了大量的優(yōu)化，但是很多問(wèn)題依然存在。比如，很多同學(xué)都問(wèn)過(guò)我的這個(gè)報(bào)錯(cuò)（使用 cnpm 安裝即可解決）：

同時(shí)也是因?yàn)檫@些問(wèn)題，所以才出現(xiàn)了后續(xù)的 yarn、pnpm、cnpm 等。

yarn：為解決 npm 的問(wèn)題而來(lái)

2016 年，F(xiàn)acebook 等大廠聯(lián)合推出了一個(gè)全新的包管理器 —— Yarn，它的誕生不是為了顛覆什么，而是為了解決當(dāng)時(shí) npm 的諸多“痛點(diǎn)”。

在那個(gè) npm install 慢如蝸牛、依賴版本時(shí)常出錯(cuò)的年代，Yarn 就像是完成了一次大的技術(shù)升級(jí)，把整個(gè)包管理的流程都做了優(yōu)化。

• yarn.lock 文件：引入了自己的鎖文件（區(qū)別于 npm 的 package-lock.json），更早解決了依賴版本不一致的問(wèn)題
• 更快的安裝體驗(yàn)：Yarn 通過(guò)緩存機(jī)制和并行安裝方式，大大提升了安裝速度。裝過(guò)一次的包，下次無(wú)需重新拉。
• 離線安裝：這是一個(gè)非常實(shí)用的特性，即使斷網(wǎng)，你也可以依賴緩存離線安裝項(xiàng)目，適合對(duì)網(wǎng)絡(luò)依賴敏感的開發(fā)場(chǎng)景。
• 原子化安裝：安裝失敗會(huì)自動(dòng)回滾，防止項(xiàng)目進(jìn)入“半安裝”狀態(tài)。

目前，Yarn 的最新版本為 V2 代號(hào)：Berry（2020 年 1 月發(fā)布），在這個(gè)版本中 Yarn 將架構(gòu)進(jìn)行了重新，提供了一個(gè)叫做 Plug'n'Play (PnP) 的概念。這種方式會(huì) 跳過(guò) node_modules，依賴通過(guò) .pnp.cjs 文件直接映射，但是對(duì)于已經(jīng)習(xí)慣了 node_modules 的前端開發(fā)者來(lái)說(shuō)，就有點(diǎn)不太友好了。

pnpm：解決硬盤空間不足的問(wèn)題

我們項(xiàng)目中所有的包都會(huì)被安裝到 node_modules 中，這就導(dǎo)致 node_modules 會(huì)變得非常大！有多大呢？大家可以看下自己項(xiàng)目中的 node_modules 大小，你會(huì)發(fā)現(xiàn)它的體積可能會(huì)比你的代碼體積大了 100 倍以上。當(dāng)時(shí)還出現(xiàn)了一個(gè)這樣的表情圖：

因此，pnpm 就出現(xiàn)了。其核心就是為了解決 node_modules 占用硬盤空間過(guò)大的問(wèn)題：

pnpm 通過(guò)一種“硬鏈接 + 內(nèi)容尋址”的存儲(chǔ)方式，將所有依賴包統(tǒng)一下載到全局緩存中（.pnpm-store），每個(gè)項(xiàng)目的 node_modules 并不真的“安裝”包，而是使用軟鏈接指向緩存中的真實(shí)文件，同一個(gè)包只會(huì)下載、存儲(chǔ)一份，再多個(gè)項(xiàng)目共用。

這樣就帶來(lái)了巨多好處，比如：下載速度飛快，空間占用大幅度下降，并且還可以完美兼容現(xiàn)有生態(tài)（保留 node_modules）。

并且，針對(duì) Monorepo 架構(gòu)，pnpm 也提供了非常好的支持（應(yīng)該可以說(shuō)是支持最好的包管理器了）。

cnpm：國(guó)內(nèi)的淘寶鏡像

cnpm 和前面所有的包管理工具不太一樣，嚴(yán)格來(lái)說(shuō) cnpm 不應(yīng)該被叫做包管理工具，而應(yīng)該被叫做一個(gè) cli 工具。

因?yàn)椋琻pm 的官方源服務(wù)器在國(guó)外，所以，我們?cè)谑褂?nbsp;npm install 時(shí)常常遇到下載失敗的問(wèn)題。

那么為了解決下載失敗的問(wèn)題，阿里巴巴就維護(hù)了一套 npm 的鏡像源，每間隔幾分鐘就會(huì)自動(dòng)同步 npm 的數(shù)據(jù)，從而保證數(shù)據(jù)與 npm 一直，就好像是 npm 的鏡子一樣。那么在我們就可以直接從國(guó)內(nèi)阿里的鏡像源來(lái)安裝依賴了。

所以，cnpm 的正確的概念應(yīng)該是 cnpm = npm 的國(guó)內(nèi)鏡像 + 一套 CLI 工具。