前端包管理工具：npm、Yarn、pnpm 快速入门

一句话理解：npm、Yarn、pnpm 都是 JavaScript 的包管理工具，用来安装、管理、更新项目依赖，以及运行项目脚本。

你有 Go 开发经验，可以这样类比：

Go 开发	前端开发
`go get`	`npm install`
`go.mod`	`package.json`
`go.sum`	`package-lock.json`
Go Module	npm Package
`go run`	`npm run`（运行预定义脚本）

一、为什么需要包管理工具？

假设你开发 React 任务管理平台，需要使用：

React：构建用户界面
Ant Design：UI 组件库
Axios：发送 HTTP 请求
TypeScript：类型检查
Vite：构建工具

如果没有包管理工具，就需要自己下载、管理这些库及其依赖。

有了 npm，只需要：

复制代码

npm install react react-dom
npm install antd axios
npm install -D typescript vite

包管理工具会根据依赖声明解析、下载并安装所需的包。

二、npm、Yarn、pnpm 有什么区别？

对比	npm	Yarn	pnpm
开发背景	npm, Inc.，现属 GitHub	Meta（原 Facebook）发起	社区开源
是否随 Node.js 提供	是	否	否
常见锁文件	`package-lock.json`	`yarn.lock`	`pnpm-lock.yaml`
依赖存储	常规 node_modules	支持多种安装模式	内容寻址存储、链接复用
使用门槛	最低	需要了解版本配置	较低
适合场景	通用项目、新手	已使用 Yarn 的项目	Monorepo、大型工程

对于你目前的学习阶段，先掌握 npm 就足够了。三者核心功能类似，不需要同时深入学习。

三、实际项目中最重要的 package.json

执行：

csharp 复制代码

npm init -y

就会创建 package.json。

例如：

json 复制代码

{
  "name": "task-platform",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "antd": "^5.0.0"
  },
  "devDependencies": {
    "vite": "^7.0.0",
    "typescript": "^5.0.0"
  }
}

版本号仅用于演示 package.json 的结构，并不代表最新版本或推荐组合。

最重要的三个字段：

字段	含义
`scripts`	定义项目执行命令
`dependencies`	项目运行所需的直接依赖
`devDependencies`	开发、检查和构建时所需的直接依赖

注意：devDependencies 不代表构建产物不能使用相关工具。比如 Vite 虽然是开发依赖，但生产构建时仍然需要它。

dependencies 和 devDependencies

bash 复制代码

# 安装普通依赖
npm install antd

# 安装开发依赖
npm install -D typescript

通常：

antd：业务代码使用的 UI 组件库。
typescript：开发和构建阶段使用的类型检查工具。

四、最常用的 npm 命令

这张表建议直接收藏，工作中基本够用了。

命令	作用
`npm init -y`	初始化项目
`npm install`	安装项目所有依赖
`npm install axios`	安装指定依赖
`npm install -D vite`	安装开发依赖
`npm uninstall axios`	卸载依赖
`npm run dev`	执行 dev 脚本
`npm run build`	执行 build 脚本
`npm list`	查看已安装依赖
`npm ci`	根据锁文件进行干净安装

其中 npm ci 特别适合 CI/CD，因为它严格按照锁文件安装，不会主动更新依赖声明或锁文件。

npm Docs+1

五、node_modules 和 lock 文件是什么？

执行：

复制代码

npm install

项目中通常会出现：

go 复制代码

task-platform/
├── node_modules/
├── package.json
├── package-lock.json
└── src/

这三个东西需要区分：

package.json：声明项目需要哪些依赖及允许的版本范围。
package-lock.json：记录实际解析出来的具体依赖版本和依赖树，帮助不同环境获得一致的安装结果。
node_modules/：本地实际安装的依赖文件。

一般来说，package-lock.json 应该提交到 Git，node_modules/ 不需要提交。

六、npm、Yarn、pnpm 常用命令对照

操作	npm	Yarn	pnpm
安装全部依赖	`npm install`	`yarn install`	`pnpm install`
添加依赖	`npm install axios`	`yarn add axios`	`pnpm add axios`
添加开发依赖	`npm install -D vite`	`yarn add -D vite`	`pnpm add -D vite`
删除依赖	`npm uninstall axios`	`yarn remove axios`	`pnpm remove axios`
运行脚本	`npm run dev`	`yarn dev`	`pnpm dev`

实际接手项目时，最好沿用项目已有的包管理工具，不要随意混用 npm、Yarn、pnpm。

例如看到 pnpm-lock.yaml，通常说明该项目使用 pnpm；如果看到 yarn.lock，通常说明项目使用 Yarn。