专注于前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

pnpm 介绍

本文介绍了pnpm的常用命令, 对于从npm/yarn迁移到pnpm, 或基于pnpm搭建内部组件库等场景, 或发布到私有仓库, 可参考使用.

pnpm 常用命令

pnpm outdated # 查看过时的包
# init package.json
pnpm init
# package.json 中 `"type": "module"` # 使用ESM规范(支持import), 不设置为CJS
# package.json 可以设置包名的命名空间, 比如 "name": "@examples/pkg-b" (不能多个/)

# 安装 workspace 内的所有依赖 -f(--force)
pnpm i
# 从根目录运行命令
pnpm -F <包目录名/包name/正则> <command> # -F等价于–filter
# 列出包信息/引用信息
pnpm why <package-name> -r
# 具体package 安装依赖
pnpm -F <package-name> add axios -D
# 具体package, 移除依赖
pnpm -F <package-name> remove axios
# packageA 中引用 packageB
# packageA 中可以 import { xxx } from 'packageB'
pnpm -F packageA add packageB --workspace
# 执行所有package的 命令 (如build/test), parallel并行执行, r查找所有包
pnpm run --parallel -r <command>
# 更新npm包版本, -L 最新版
pnpm -F web-vue up xxx -L
pnpm up [email protected] # 升级/降级 npm包
# 更新工作区link关系
pnpm up --workspace
# 下载和执行 xxx
pnpm dlx create-react-app
pnpm dlx create-vue # Vite
# 从 create-* 创建项目
pnpm create react-app demo-react #  create-react-app
pnpm create vue demo-vue # create-vue
# pnpm create vite vue-vite --template vue-ts

FAQs

安装 workspace 包, 包版本号设为 workspace:*

.npmrc 增加

# https://pnpm.io/npmrc#save-workspace-protocol
save-workspace-protocol=rolling # 工作区中安装依赖项时,使用 workspace: 协议
save-prefix=^ # ^(caret 前缀) - ^1.2.3 表示 >=1.2.3 <2.0.0; ""(空字符串) - 确切的版本号

pnpm i 警告 Issues with peer dependencies found, missing peer

peerDependencies 声明核心依赖(如 typescript/eslint), 避免重复安装, 项目中要有相应的包, 否则会报警告.
方式 1. 根据提示在项目的 package.json dependencies 声明符合条件的 包版本.
方式 2. pnpm config set auto-install-peers true 自动安装 peers

为什么用 pnpm

  • 比 yarn 和 npm 更快, 比 npm 快 3 倍, 比 yarn 快(yarn 安装共享依赖是从缓存中复制文件)
  • pnpm 使用更少的磁盘空间(只从全局存储中链接文件, 包版本在磁盘上仅保存 1 次)
  • 方便管理多个项目, 统一管理/代码复用(monorepo, 减少维护多个 git 仓库的成本)

version management 包版本管理&发布

pnpm add -Dw @changesets/cli # 安装
pnpm changeset init # 初始化

# .changeset/config.json
# https://github.com/changesets/changesets/blob/main/docs/config-file-options.md
changelog: changelog 生成方式
commit: 在 publish 的时是否 git add
access: 公开/私有,restricted私有包 (需要登录一个具有安装权限的NPM帐户), public公开包
baseBranch: 项目主分支
fixed: 捆绑发布的包, 一个组里的包, 无论是否有修改或依赖关系, 都会同步修改到相同的版本
linked: 关联版本的包, 一个组里的包, 有依赖关系或有修改的包会同步更新到相同版本, 未修改且无依赖关系的包则版本不做变化
# fixed 无修改也会一起更新版本, linked 有修改的才同步更新版本
ignore: changeset命令 排除的包(选择时过滤掉), 比如: `"@examples/*"`

# pnpm -F <package-name> build
# 选择需要修改版本的包
pnpm changeset add # 空格 选择包, 再选 major(主版本), minor(次版本), patch(补丁), 对应x.y.z版本变动 (回车跳过对应版本)
# 更新包版本
pnpm changeset version
# 发包 Sonatype Nexus
pnpm changeset publish # changeset publish 会读取 package.json 的 publishConfig

# 发布到私有仓库
# pnpm login --registry=http://x.x.x.x:8181/repository/npm-local/
# pnpm whoami --registry=http://x.x.x.x:8181/repository/npm-local/
# //192.200.1.159:8181/repository/npm-local/:_auth="xxx" # echo -n 'user:pwd' | openssl base64

# package.json 配置 ("private": true 不会被发布):
"private": false,
"publishConfig": {
  "access": "public",
  "registry": "http://x.x.x.x/repository/npm-local/"
},

# 利用 pnpm 强制发布 (changeset已存在版本不会再发布)
# pnpm -F \"@ui-component/*\" publish --no-git-checks --force

组件库 package.json scripts 参考配置

"build": "pnpm -F \"@ui-component/*\" run build",
"changeset": "changeset add",
"changeset:version": "changeset version",
"changeset:publish": "changeset publish",
"release": "pnpm build && changeset publish"

Release

pnpm changeset # 选择包, 填写变更信息
pnpm changeset version # 更新包版本/changelog (release-it ?)
pnpm release # build & 发布

# 如果不走 changeset 流程, 也可直接发布
pnpm build # build 组件库
pnpm -F='@ui-component/*' publish --no-git-checks # --force

强制在项目中使用 pnpm

项目 package.json scripts 增加一行 "preinstall": "npx only-allow pnpm"

/ 分类: 工具 / TrackBackhttps://xhl.me/archives/pnpm/trackback标签: pnpm

添加新评论 »