本文已参与「新人创作礼」活动，一起开启掘金创作之路。

企业级轻量框架实践 之 pnpm包管理工具 篇

Pnpm

pnpm 节约磁盘空间并提升安装速度。 当使用 npm 或 Yarn 时，如果你有100个项目使用了某个依赖（dependency），就会有100份该依赖的副本保存在硬盘上。而在使用 pnpm 时，依赖会被存储在内容可寻址的存储中，所以：

1. 如果你用到了某依赖项的不同版本，那么只会将有差异的文件添加到仓库。 例如，如果某个包有100个文件，而它的新版本只改变了其中1个文件。那么 pnpm update 时只会向存储中心额外添加1个新文件，而不会因为仅仅一个文件的改变复制整新版本包的内容。

2. 所有文件都会存储在硬盘上的某一位置。 当软件包被被安装时，包里的文件会硬链接到这一位置，而不会占用额外的磁盘空间。 这允许你跨项目地共享同一版本的依赖。

通过 npm 全局安装

npm install -g pnpm

设置淘宝镜像

pnpm config set registry http://registry.npm.taobao.org

查看镜像

pnpm config get registry

故障排查

假设您在运行 pnpm install时遇到以下错误：

node_modules/.pnpm/registry.npmmirror.com+core-js@3.21.0/node_modules/core-js: Running postinstall script, done in 1.1s
node_modules/.pnpm/registry.npmmirror.com+cwebp-bin@5.1.0/node_modules/cwebp-bin: Running postinstall script...
node_modules/.pnpm/registry.npmmirror.com+gifsicle@5.2.0/node_modules/gifsicle: Running postinstall script, failed in 12.5s
.../node_modules/gifsicle postinstall$ node lib/install.js
│   ‼ getaddrinfo ENOENT raw.githubusercontent.com
│   ‼ gifsicle pre-build test failed
│   i compiling from source
│   × Error: Command failed: C:\Windows\system32\cmd.exe /s /c "autoreconf -ivf"

解决方案

package.json 中添加 resolutions 配置

  "resolutions": {
    "bin-wrapper": "npm:bin-wrapper-china"
  }

package.json 添加配置

  "scripts": {
    "bootstrap": "pnpm install --ignore-scripts",
    "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
  },
  "resolutions": {
    "bin-wrapper": "npm:bin-wrapper-china"
  },
  "engines": {
    "node": "^12 || >=14",
    "pnpm": "^6 || >=5"
  },

CLI命令

• pnpm init
• pnpm install
• pnpm add
• pnpm add --dev
• pnpm remove <pkg>
• pnpm start
• pnpm test
• pnpm build
• pnpm publish [tag]
• pnpm run <script>

VScode pnpm 扩展

继续学习

# Vite+Vue3+TypeScript+Element (一) 搭建企业级轻量框架实践