---

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）
npm init
npm init -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 安装依赖

# 安装项目依赖（生产依赖）
npm install express
npm i express                # 简写
npm i express@4.17.0         # 指定版本

# 安装开发依赖（只在开发环境使用）
npm i webpack --save-dev
npm i webpack -D             # 简写

# 全局安装（命令行工具）
npm i -g typescript

# 从 package.json 安装所有依赖
npm install
npm i                        # 简写

---

二、yarn（Facebook 出品）

# 安装 yarn
npm i -g yarn

# 初始化
yarn init -y

# 安装依赖
yarn add express
yarn add webpack --dev       # 开发依赖
yarn global add typescript   # 全局安装

# 从 yarn.lock 安装
yarn install
yarn                         # 简写

# 更新与卸载
yarn upgrade express
yarn remove express

---

三、pnpm（高性能，节省磁盘空间）

# 安装 pnpm
npm i -g pnpm

# 初始化
pnpm init

# 安装依赖
pnpm add express
pnpm add webpack -D          # 开发依赖
pnpm add -g typescript       # 全局安装

# 安装所有依赖
pnpm install
pnpm i                       # 简写

# 更新与卸载
pnpm update express
pnpm remove express

3.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"
  }
}

# 运行脚本
npm run start
npm start                  # start、stop、test、restart 可省略 run
npm run build

# yarn / pnpm 类似
yarn start
pnpm build

---

五、语义化版本（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

---

七、课后作业

1. 用 npm 初始化一个项目，安装 lodash 和 axios
2. 配置淘宝镜像源，比较安装速度
3. 写一个 package.json，包含 start、dev、build 三个脚本

有问题欢迎评论区留言，大家一起讨论！

---

标签：JavaScript | npm | yarn | pnpm | 包管理 | 前端工程化 | 依赖管理