快捷導(dǎo)航

帶你了解前端的幾種包管理器(npm/pnpm等)

更新時(shí)間：2023年04月22日 09:14:32 作者：太空編程

隨著前端工程化的應(yīng)用越來越廣，插件和包的管理也逐漸衍生出很多的管理器，常見的幾種包管理器如：npm、cnpm、yarn、pnpm，那你知道這些管理器之間有哪些區(qū)別嗎？我們一起來逐個(gè)認(rèn)識下它們

npm

npm 是 Node.js 自帶的包管理器，平時(shí)通過 npm install 命令來安裝各種 npm 包（比如：npm install vue-router ），就是通過這個(gè)包管理器來安裝的。關(guān)于 npm 包下載鏡像源的設(shè)置：

# 查看下載源
npm config get registry

# 綁定下載源
npm config set registry https://registry.npmmirror.com

# 刪除下載源
npm config rm registry

npm 的包的版本鎖定文件是 package-lock.json ，如果有管理多人協(xié)作倉庫的需求，可以根據(jù)實(shí)際情況把它添加至 .gitignore 文件，便于統(tǒng)一團(tuán)隊(duì)的包管理。

cnpm

cnpm 是阿里巴巴推出的包管理工具，安裝之后默認(rèn)會使用 https://registry.npmmirror.com 這個(gè)鏡像源。

它的安裝命令和 npm 非常一致，通過 cnpm install 命令來安裝（比如 cnpm install vue-router）。在使用它之前，需要通過 npm 命令進(jìn)行全局安裝：

npm install -g cnpm

# 或者
npm install -g cnpm --registry=https://registry.npmmirror.com

cnpm 不生成版本鎖定 lock 文件，也不會識別項(xiàng)目下的 lock 文件，所以還是推薦使用 npm 或者其他包管理工具，通過綁定鏡像源的方式來管理項(xiàng)目的包。

yarn

yarn 也是一個(gè)常用的包管理工具，和 npm 十分相似， npmjs 上的包，也會同步到 yarnpkg 。也是需要全局安裝才可以使用：

npm install -g yarn

但是安裝命令上會有點(diǎn)不同， yarn 是用 yarn add 代替 npm install ，用 yarn remove 代替 npm uninstall ，例如：

# 安裝單個(gè)包
yarn add vue-router

# 安裝全局包
yarn global add typescript

# 卸載包
yarn remove vue-router

而且在運(yùn)行腳本的時(shí)候，可以直接用 yarn 來代替 npm run ，例如 yarn dev 相當(dāng)于 npm run dev 。升級的時(shí)候用 yarn upgrade 代替 npm update命令。 yarn 默認(rèn)綁定的是 https://registry.yarnpkg.com 的下載源，如果包的下載速度太慢，也可以配置鏡像源，但是命令有所差異：

# 查看鏡像源
yarn config get registry

# 綁定鏡像源
yarn config set registry https://registry.npmmirror.com

# 刪除鏡像源（注意這里是 delete ）
yarn config delete registry

yarn 的版本鎖定文件是 yarn.lock ，如果有管理多人協(xié)作倉庫的需求，可以根據(jù)實(shí)際情況把它添加至 .gitignore 文件，便于統(tǒng)一團(tuán)隊(duì)的包管理。

pnpm

pnpm 是包管理工具的一個(gè)后起之秀，主要優(yōu)點(diǎn)在于快速的、節(jié)省磁盤空間，如果你的包在一個(gè)項(xiàng)目中已經(jīng)下載了，其它項(xiàng)目再用到這個(gè)包就不需要再次下載，而是通過軟鏈接的方式關(guān)聯(lián)。用法跟其他包管理器很相似，沒有太多的學(xué)習(xí)成本， npm 和 yarn 的命令它都支持。也是必須先全局安裝它才可以使用：