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

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

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

npm

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

# 查看下載源
npm config get registry

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

# 刪除下載源
npm config rm registry

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

cnpm

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

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

npm install -g cnpm

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

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

yarn

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

npm install -g yarn

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

# 安裝單個包
yarn add vue-router

# 安裝全局包
yarn global add typescript

# 卸載包
yarn remove vue-router

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

# 查看鏡像源
yarn config get registry

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

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

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

pnpm

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