第9课：包管理：npm与pnpm

📖 核心概念

💡 npm与package.json详解
💡 依赖类型：dependencies/devDependencies/peerDependencies
💡 语义化版本(SemVer)与版本范围
💡 pnpm：硬链接与内容寻址存储
💡 monorepo与workspace
💡 依赖安全与审计

💻 代码实现

package.json与依赖管理 ✅ json

{
  "name": "@myorg/frontend-app",
  "version": "1.0.0",
  "type": "module",
  "description": "Modern frontend application",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test": "vitest",
    "test:coverage": "vitest --coverage",
    "lint": "eslint . --ext .ts,.tsx",
    "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
    "prepare": "husky install",
    "release": "standard-version"
  },
  "dependencies": {
    "react": "^18.3.0",
    "react-dom": "^18.3.0",
    "react-router-dom": "^6.20.0",
    "zustand": "^4.4.0",
    "framer-motion": "^10.16.0"
  },
  "devDependencies": {
    "typescript": "^5.3.0",
    "vite": "^5.0.0",
    "@vitejs/plugin-react": "^4.2.0",
    "vitest": "^1.0.0",
    "eslint": "^8.55.0",
    "prettier": "^3.1.0",
    "husky": "^8.0.0",
    "@types/react": "^18.3.0"
  },
  "peerDependencies": {
    "react": "^18.0.0"
  },
  "overrides": {
    "lodash": "^4.17.21"
  },
  "engines": {
    "node": ">=18.0.0",
    "pnpm": ">=8.0.0"
  },
  "packageManager": "pnpm@8.12.0"
}

pnpm与monorepo ✅ bash

# pnpm workspace配置
# pnpm-workspace.yaml
# packages:
#   - 'apps/*'
#   - 'packages/*'

# 常用pnpm命令
pnpm init                          # 初始化项目
pnpm add react                     # 添加依赖
pnpm add -D typescript             # 添加开发依赖
pnpm add -w eslint                 # 添加到workspace根目录
pnpm remove lodash                 # 移除依赖
pnpm update --interactive          # 交互式更新
pnpm outdated                      # 检查过时的包
pnpm audit                         # 安全审计
pnpm why react                     # 查看依赖链
pnpm store prune                   # 清理缓存

# Monorepo项目结构
# my-monorepo/
# ├── pnpm-workspace.yaml
# ├── package.json
# ├── apps/
# │   ├── web/          # 主应用
# │   └── admin/        # 管理后台
# └── packages/
#     ├── ui/           # 共享组件库
#     ├── utils/        # 工具函数
#     └── config/       # 共享配置

# 在apps/web中使用packages/ui
# apps/web/package.json:
# {
#   "dependencies": {
#     "@myorg/ui": "workspace:*"
#   }
# }

# 常用workspace命令
pnpm -r run build                  # 所有包构建
pnpm --filter @myorg/ui build      # 构建特定包
pnpm --filter web... build         # 构建web及其依赖
pnpm -r --parallel test            # 并行测试所有包

🔍 包管理进阶与安全

锁文件与依赖确定性

锁文件（pnpm-lock.yaml）确保团队成员和CI环境安装完全相同的依赖版本。以下是锁文件管理的最佳实践：

始终将锁文件提交到版本控制
使用 pnpm install --frozen-lockfile 在CI中确保一致性
定期运行 pnpm update 更新依赖，然后检查变更
使用 pnpm dedupe 减少重复依赖

依赖安全审计

安全审计流程 ✅ bash

# 检查已知漏洞
pnpm audit

# 自动修复可修复的漏洞
pnpm audit --fix

# 查看依赖树
pnpm list --depth=3

# 检查某个包为什么被安装
pnpm why lodash

# 检查过时的包
pnpm outdated

# 使用overrides强制指定版本
# package.json:
# "overrides": {
#   "lodash": "^4.17.21",
#   "semver": "^7.5.0"
# }

# .npmrc 配置
# shamefully-hoist=true
# strict-peer-dependencies=false
# auto-install-peers=true

Monorepo工作流

pnpm workspace为monorepo提供了强大的支持，以下是常用工作流：

Changesets — 管理monorepo中的版本变更和发版流程
Turborepo — 增量构建和任务缓存，大幅提升CI速度
共享配置 — 将ESLint、TypeScript、Prettier配置提取到packages/config
依赖图 — 使用 pnpm --filter ...build 按依赖顺序构建

🎯 练习任务

1 创建一个pnpm monorepo，包含3个包
2 配置workspace依赖关系，实现包间引用
3 使用pnpm audit检查项目依赖安全性
4 实现一个自定义的publish脚本，自动化版本发布流程

🏆 成就解锁

依赖管家 — 掌握现代包管理工具，高效组织项目依赖