前端辨识:npx、npm 、pnpm的区别

下面从定位、原理、速度/磁盘、用法、适用场景分别说清楚。


一、定位:不是同一类东西

  • npm

    • 全称:Node Package Manager
    • 地位:Node.js 内置,官方标准包管理器
    • 作用:管理项目依赖、运行 scripts、发布包
  • pnpm

    • 全称:Performant npm
    • 地位:第三方替代方案,需手动安装
    • 作用:和 npm 一样管理依赖,但底层机制更高效
  • npx

    • 全称:Node Package eXecute
    • 地位:npm 5.2+ 自带,不是包管理器
    • 作用:临时执行 npm 包的命令,不长期安装依赖

二、核心原理与 node_modules 结构

1. npm:扁平化 + 重复存储
  • node_modules 会扁平化 (把深层依赖提到首层),导致:
    • 依赖提升、幽灵依赖(没写在 package.json 却能引用)
    • 每个项目都完整复制一份依赖,磁盘大量重复
  • 锁文件:package-lock.json
2. pnpm:硬链接 + 内容寻址存储(CAS)
  • 所有项目同一版本的包只存一份(全局 store)
  • 项目 node_modules 里用硬链接 指向全局 store,用软链接组织依赖树
  • 结果:
    • 磁盘节省 50%--80%
    • 依赖树严格,无幽灵依赖
    • 安装速度比 npm 快 2--3 倍
  • 锁文件:pnpm-lock.yaml
3. npx:临时下载 → 执行 → 销毁
  • 流程:
    1. 先查本地 node_modules/.bin
    2. 再查全局
    3. 都没有就临时下载到缓存,执行后不污染全局
  • 不改变项目依赖,不写 package.json

三、速度与磁盘对比(直观版)

特性 npm pnpm npx
类型 包管理器 包管理器(高性能) 命令执行器
安装速度 慢(串行+少量并行) 最快(全并行+硬链接复用) 只跑命令,不管理依赖
磁盘占用 高(大量重复) 极低(全局共享一份) 不长期占用
依赖结构 扁平,易有幽灵依赖 严格树,无幽灵依赖 无依赖结构
Monorepo 需配置 workspace 原生支持,体验好 无关
适用项目 小型、简单项目 中大型、多项目、Monorepo 临时跑命令、脚手架

四、常用命令对比

npm
bash 复制代码
npm install      # 安装依赖
npm uninstall xxx # 卸载
npm run build    # 跑脚本
npm init         # 初始化项目
pnpm
bash 复制代码
pnpm install     # 等价 npm install
pnpm add xxx     # 安装依赖
pnpm remove xxx  # 卸载
pnpm run build   # 跑脚本
npx
bash 复制代码
# 临时用 create-react-app,不用全局安装
npx create-react-app my-app

# 临时跑 eslint
npx eslint .

# 执行本地 node_modules/.bin 里的命令
npx jest

五、怎么选(简单建议)

  • 初学/小项目/官方模板:用 npm(开箱即用,稳定)
  • 中大型项目/多项目共存/追求快+省空间:用 pnpm(现在很多大厂都转 pnpm)
  • 临时用工具、脚手架、不想全局安装:用 npx

六、一句话总结

  • npm:官方标配,稳但慢、费磁盘。
  • pnpm :npm 加强版,更快、更省、更安全。
  • npx :临时跑命令的工具,不装包也能用。
相关推荐
wangruofeng7 分钟前
同一行代码,百种渲染:Asuka、React Native 与 Flutter 跨平台渲染机制深度拆解
前端·github
濮水大叔13 分钟前
Cabloy/Vona 为什么不需要 NestJS 的 Dynamic Module
typescript·node.js·nestjs
Penge66627 分钟前
JavaScript 核心语法速通
前端
wangruofeng2 小时前
写给开发者的〈重构 UI〉实战笔记:从改好一个设置页开始,告别“程序员审美”
前端·aigc
程序员鱼皮2 小时前
格局!刚刚 DeepSeek 正式开放全家桶 API,咱都能复刻 DeepSeek App 了?
前端·aigc·ai编程
ZhengEnCi3 小时前
登录页电脑端怎么设计才不空:5 种布局方案与可粘贴 AI 提示词
前端·css·设计
匠云创新3 小时前
读完一万段要两分钟:我们把标书读取从 WPS 对象模型搬到了 docx 解析
性能优化·node.js
Penge6663 小时前
JavaScript:DOM 树
前端
Penge6663 小时前
CSS 核心布局指南:盒模型、Flex 布局与 Position 定位
前端
Penge6664 小时前
HTML基础:HTML 标签属性
前端