author: 专注前端开发，分享JavaScript干货
title: JavaScript工程化①｜npm_yarn_pnpm包管理器，现代前端必备
update: 2026-04-28
tags: JavaScript,npm,yarn,pnpm,包管理,前端工程化,依赖管理
作者：专注前端开发，分享JavaScript干货
更新时间：2026年4月
适合人群：掌握JS基础，想学习现代前端工程化工具的开发者
前言：为什么需要包管理器？
现代前端开发离不开第三方库（React、Vue、Webpack等）。
包管理器用来安装、更新、删除这些依赖，并管理版本和依赖关系。
一、npm（Node Package Manager）
1.1 初始化项目
# 初始化项目（生成 package.json）npminitnpminit-y# 跳过问答，使用默认值package.json核心字段：
{"name":"my-project","version":"1.0.0","description":"项目描述","main":"index.js","scripts":{"start":"node index.js","build":"webpack --mode production"},"dependencies":{"express":"^4.18.2"},"devDependencies":{"webpack":"^5.88.0"}}1.2 安装依赖
# 安装项目依赖（生产依赖）npminstallexpressnpmi express# 简写npmi express@4.17.0# 指定版本# 安装开发依赖（只在开发环境使用）npmi webpack --save-devnpmi webpack-D# 简写# 全局安装（命令行工具）npmi-gtypescript# 从 package.json 安装所有依赖npminstallnpmi# 简写二、yarn（Facebook 出品）
# 安装 yarnnpmi-gyarn# 初始化yarninit-y# 安装依赖yarnaddexpressyarnaddwebpack--dev# 开发依赖yarnglobaladdtypescript# 全局安装# 从 yarn.lock 安装yarninstallyarn# 简写# 更新与卸载yarnupgrade expressyarnremove express三、pnpm（高性能，节省磁盘空间）
# 安装 pnpmnpmi-gpnpm# 初始化pnpminit# 安装依赖pnpmaddexpresspnpmaddwebpack-D# 开发依赖pnpmadd-gtypescript# 全局安装# 安装所有依赖pnpminstallpnpmi# 简写# 更新与卸载pnpmupdate expresspnpmremove express3.2 pnpm 的优势
| 特性 | npm | yarn | pnpm |
|---|---|---|---|
| 安装速度 | 一般 | 快 | 最快 |
| 磁盘空间 | 每个项目独立 | 每个项目独立 | 共享依赖（节省空间） |
| 依赖隔离 | ❌ | ✅ | ✅ |
四、scripts 脚本
{"scripts":{"start":"node index.js","dev":"nodemon index.js","build":"webpack --mode production","test":"jest","lint":"eslint src/**/*.js"}}# 运行脚本npmrun startnpmstart# start、stop、test、restart 可省略 runnpmrun build# yarn / pnpm 类似yarnstartpnpmbuild五、语义化版本（SemVer）
版本号：主版本.次版本.修订号（如2.3.1）
| 符号 | 含义 | 示例 | 解释 |
|---|---|---|---|
^ | 允许更新次版本和修订号 | ^2.3.1 | >=2.3.1 <3.0.0 |
~ | 只允许更新修订号 | ~2.3.1 | >=2.3.1 <2.4.0 |
| 无前缀 | 精确版本 | 2.3.1 | 仅2.3.1 |
六、知识卡
| 命令 | npm | yarn | pnpm |
|---|---|---|---|
| 初始化 | npm init -y | yarn init -y | pnpm init |
| 安装依赖 | npm i pkg | yarn add pkg | pnpm add pkg |
| 开发依赖 | npm i pkg -D | yarn add pkg -D | pnpm add pkg -D |
| 全局安装 | npm i -g pkg | yarn global add pkg | pnpm add -g pkg |
| 卸载 | npm un pkg | yarn remove pkg | pnpm remove pkg |
| 安装所有 | npm i | yarn | pnpm i |
七、课后作业
- 用 npm 初始化一个项目，安装
lodash和axios - 配置淘宝镜像源，比较安装速度
- 写一个
package.json，包含start、dev、build三个脚本
有问题欢迎评论区留言，大家一起讨论！
标签：JavaScript | npm | yarn | pnpm | 包管理 | 前端工程化 | 依赖管理
