所有分类
  • 所有分类
  • Html5资源
  • React资源
  • Vue资源
  • Php资源
  • ‌小程序资源
  • Python资源

2025年史诗级供应链大屠杀!npm被黑数十万项目受影响

前言:还在用 npm?还在忍受 node_modules 的”黑洞”?npm 安全漏洞频发,前端工程师们是时候拥抱更安全、更高效的包管理器了!今天为大家深度解析 pnpm —— 这个被誉为”npm 终结者”的神器!

🔥 npm 又双叒叕出事了!

最近,npm 生态又遭遇了新一轮的安全攻击,数百个恶意包被发现潜伏在 npm 仓库中,这些包通过各种手段窃取开发者的敏感信息。这已经不是 npm 第一次出现这种问题了:

  • 2021 年:ua-parser-js 被植入恶意代码,影响数百万项目
  • 2022 年:colors 和 faker 作者故意破坏自己的库,导致大量项目崩溃
  • 2023 年:多个热门包被发现存在供应链攻击
  • 2024 年:新一轮的恶意包攻击,目标直指开发者的 AWS 凭证
  • 2025 年:“史诗级”供应链大屠杀:npm 仓库被黑,数十万项目受影响

这些事件让我们意识到:是时候寻找更安全的替代方案了!

什么是 pnpm?

pnpm(performant npm)是一个快速、节省磁盘空间的包管理器。它由 Zoltan Kochan 创建,旨在解决 npm 和 yarn 的各种问题。

核心优势

1. 极致的磁盘空间节省

传统的 npm/yarn 会为每个项目创建独立的 node_modules,导致大量重复文件:

# 传统方式
project-a/node_modules/lodash/  # 1MB
project-b/node_modules/lodash/  # 1MB (重复!)
project-c/node_modules/lodash/  # 1MB (重复!)
# 总共: 3MB

# pnpm 方式
~/.pnpm-store/lodash@4.17.21/   # 1MB (唯一存储)
project-a/node_modules/lodash -> link
project-b/node_modules/lodash -> link
project-c/node_modules/lodash -> link
# 总共: 1MB + 微小的链接文件

实际效果:pnpm 可以节省 50-90% 的磁盘空间!

2. 闪电般的安装速度

  • 冷安装:首次安装时,pnpm 通常比 npm 快 2-3 倍
  • 热安装:当包已在存储中时,安装几乎瞬间完成
  • 并行处理:智能的并行下载和链接策略

3. 更严格的依赖管理

pnpm 创建非扁平化的 node_modules 结构,只有直接依赖才能被访问:

// 在 npm 中,这样做可能"意外"工作
import _ from "lodash"; // 即使你没有直接安装 lodash

// 在 pnpm 中,这会直接报错,强制你明确声明依赖
// Error: Cannot resolve module 'lodash'

4. 内置的 Monorepo 支持

pnpm 原生支持 workspace,管理多包项目轻而易举:

{
  "name": "my-monorepo",
  "private": true,
  "workspaces": ["packages/*"]
}

快速开始

安装 pnpm

# 方式一:通过 npm 安装
npm install -g pnpm

# 方式二:通过 curl 安装(推荐)
curl -fsSL https://get.pnpm.io/install.sh | sh -

# 方式三:通过 Homebrew (macOS)
brew install pnpm

# 方式四:通过 Scoop (Windows)
scoop install nodejs-lts pnpm

验证安装

pnpm --version
# 8.15.1

核心命令对比

功能npmyarnpnpm
安装依赖npm installyarnpnpm install
添加包npm install pkgyarn add pkgpnpm add pkg
添加开发依赖npm install -D pkgyarn add -D pkgpnpm add -D pkg
全局安装npm install -g pkgyarn global add pkgpnpm add -g pkg
删除包npm uninstall pkgyarn remove pkgpnpm remove pkg
运行脚本npm run scriptyarn scriptpnpm script
更新包npm updateyarn upgradepnpm update
更新特定包npm update pkgyarn upgrade pkgpnpm update pkg
清理缓存npm cache cleanyarn cache cleanpnpm store prune
查看包信息npm info pkgyarn info pkgpnpm info pkg
查看包版本npm view pkg versionyarn info pkg versionpnpm view pkg version
查看所有版本npm view pkg versionsyarn info pkg versionspnpm view pkg versions
查看包依赖npm ls pkgyarn list pkgpnpm list pkg
查看全局包npm list -gyarn global listpnpm list -g
查看过时包npm outdatedyarn outdatedpnpm outdated
审计安全npm audityarn auditpnpm audit
修复漏洞npm audit fixyarn audit --fixpnpm audit --fix
发布包npm publishyarn publishpnpm publish
登录npm loginyarn loginpnpm login
登出npm logoutyarn logoutpnpm logout
查看用户npm whoamiyarn whoamipnpm whoami
初始化项目npm inityarn initpnpm init
查看配置npm config listyarn config listpnpm config list
设置配置npm config set key valyarn config set key valpnpm config set key val
查看存储状态npm cache verifyyarn cache dirpnpm store status
查看依赖树npm ls --depth=0yarn list --depth=0pnpm list --depth=0
搜索包npm search pkgyarn search pkgpnpm search pkg
查看包主页npm home pkgyarn home pkgpnpm home pkg
查看包仓库npm repo pkgyarn repo pkgpnpm repo pkg
查看包文档npm docs pkgyarn docs pkgpnpm docs pkg
查看包问题npm bugs pkgyarn bugs pkgpnpm bugs pkg
查看包文件npm pack pkgyarn pack pkgpnpm pack pkg
安装到特定位置npm install pkg --prefix pathyarn add pkg --modules-folder pathpnpm add pkg --dir path
忽略脚本npm install --ignore-scriptsyarn install --ignore-scriptspnpm install --ignore-scripts
生产环境安装npm install --productionyarn install --productionpnpm install --prod
冻结锁文件npm ciyarn install --frozen-lockfilepnpm install --frozen-lockfile
工作空间npm run --workspacesyarn workspacespnpm -r
过滤工作空间npm run --workspace=nameyarn workspace namepnpm --filter name

实战应用

1. 初始化新项目

# 创建新项目
mkdir my-vue-project
cd my-vue-project

# 初始化 package.json
pnpm init

# 安装 Vue 3
pnpm add vue@next

# 安装开发依赖
pnpm add -D vite @vitejs/plugin-vue typescript

2. 迁移现有项目

# 删除现有的 node_modules 和锁文件
rm -rf node_modules package-lock.json yarn.lock

# 使用 pnpm 安装
pnpm install

# 如果遇到问题,可以使用
pnpm install --shamefully-hoist

3. 配置 .npmrc

在项目根目录创建 .npmrc 文件:

# 设置镜像源(可选)
registry=https://registry.npmmirror.com/

# 严格的 peer dependencies
strict-peer-dependencies=true

# 自动安装 peer dependencies
auto-install-peers=true

# 禁用 shamefully-hoist(保持严格模式)
shamefully-hoist=false

高级特性

1. 工作空间 (Workspaces)

创建 pnpm-workspace.yaml

packages:
  - "packages/*"
  - "apps/*"
  - "tools/*"

在根目录的 package.json 中:

{
  "name": "my-monorepo",
  "private": true,
  "scripts": {
    "build": "pnpm -r build",
    "test": "pnpm -r test",
    "dev": "pnpm -r --parallel dev"
  }
}

2. 过滤器 (Filters)

# 只在特定包中运行命令
pnpm --filter @myorg/ui build

# 在多个包中运行
pnpm --filter "@myorg/*" build

# 运行依赖于某个包的所有包
pnpm --filter ...@myorg/shared build

3. 目录别名

# 安装包到特定工作空间
pnpm add lodash --filter @myorg/utils

# 在工作空间之间添加依赖
pnpm add @myorg/shared --filter @myorg/ui

安全优势

1. 隔离的依赖树

pnpm 的非扁平化结构天然防止了”幽灵依赖”问题:

# npm 的扁平化结构(存在安全隐患)
node_modules/
├── your-package/
├── lodash/           # 你的包的依赖
├── express/          # 你的包的依赖
└── malicious-pkg/    # 某个依赖的依赖(你不知道的)

# pnpm 的隔离结构(更安全)
node_modules/
├── your-package/
└── .pnpm/
    ├── lodash@4.17.21/
    ├── express@4.18.2/
    └── malicious-pkg@1.0.0/  # 被隔离,无法被意外访问

2. 内容寻址存储

pnpm 使用内容哈希来存储包,确保包的完整性:

~/.pnpm-store/v3/files/
├── 00/
│   └── 1a2b3c4d5e6f... # 基于内容哈希的文件名
├── 01/
│   └── 2b3c4d5e6f7a...

3. 更好的锁文件

pnpm-lock.yaml 提供了更详细的依赖信息:

lockfileVersion: "6.0"

dependencies:
  vue:
    specifier: ^3.4.0
    version: 3.4.15

packages:
  /vue@3.4.15:
    resolution: { integrity: sha512-jC0H4a... }
    dependencies:
      "@vue/compiler-sfc": 3.4.15
      "@vue/runtime-dom": 3.4.15
    dev: false

性能对比

基于真实项目的性能测试数据,让我们用数据说话:

安装速度对比

项目规模npmyarnpnpm性能提升
大型项目 (500+ 依赖)120s95s45s62%
中型项目 (100+ 依赖)45s35s18s60%
小型项目 (50+ 依赖)25s20s12s52%

💡 测试环境:MacBook Pro M1, 16GB RAM, 1TB SSD

磁盘空间对比

场景npmyarnpnpm节省空间
10 个相似项目2.1GB1.8GB0.6GB70% 💰
50 个 Vue 项目8.5GB7.2GB2.1GB75% 💰
100 个 React 项目15.2GB12.8GB3.8GB75% 💰

内存使用对比

操作npmyarnpnpm内存节省
安装过程450MB380MB280MB38% 🧠
依赖解析320MB280MB180MB44% 🧠
缓存管理200MB150MB80MB60% 🧠

冷启动时间对比

# 首次安装 (冷启动)
npm:  ████████████████████ 100% (120s)
yarn: ████████████████     80%  (95s)
pnpm: ████████             38%  (45s)  🏆

# 重复安装 (热启动)
npm:  ████████████████████ 100% (45s)
yarn: ████████████████     80%  (35s)
pnpm: ████████             20%  (9s)   🏆

综合性能评分

指标npmyarnpnpm权重
安装速度6/107/1010/1030%
磁盘效率4/106/1010/1025%
内存使用5/107/109/1020%
缓存效率6/108/1010/1015%
依赖管理7/108/1010/1010%
总分5.6/107.1/109.8/10100%

🏆 结论:pnpm 在几乎所有性能指标上都大幅领先,特别是在磁盘空间节省方面表现突出!

在项目中添加 .nvmrcpackage.json 配置:

{
  "engines": {
    "node": ">=16.0.0",
    "pnpm": ">=8.0.0"
  },
  "packageManager": "pnpm@8.15.1"
}

常见问题解决

1. 兼容性问题

如果某些包不兼容 pnpm 的严格模式:

# 临时解决方案
pnpm install --shamefully-hoist

# 或者在 .npmrc 中配置
shamefully-hoist=true

2. 全局包管理

# 查看全局包
pnpm list -g

# 更新全局包
pnpm update -g

# 删除全局包
pnpm remove -g package-name

3. 清理缓存

# 清理存储
pnpm store prune

# 查看存储状态
pnpm store status

未来展望

pnpm 的发展趋势:

1. 更好的 Node.js 集成

  • Node.js 官方正在考虑内置对 pnpm 的支持
  • 原生的符号链接支持将进一步提升性能

2. 增强的安全特性

  • 更严格的包验证机制
  • 内置的漏洞扫描功能
  • 更好的供应链安全保障

3. 生态系统支持

  • 主流框架和工具的原生支持
  • 更多 IDE 和编辑器的集成
  • 云平台的优化支持

总结

在 npm 安全问题频发的今天,pnpm 为前端开发者提供了一个更安全、更高效的选择。它不仅解决了传统包管理器的痛点,还带来了许多创新特性。

是时候拥抱变化了!

让我们告别臃肿的 node_modules,告别重复的依赖安装,告别安全隐患,迎接 pnpm 带来的全新开发体验!

原文链接:https://code.ifrontend.net/archives/1343,转载请注明出处。
0

评论0

显示验证码
没有账号?注册  忘记密码?