什么是Yarn
Yarn 是一个快速、可靠、安全的 JavaScript 包管理器,由 Facebook、Google、Exponent 和 Tilde 联合开发,用于替代 npm。
核心价值
| 维度 | 优势 | 解决痛点 |
|---|---|---|
| 速度 | 并行安装、缓存机制 | npm 串行安装慢 |
| 可靠性 | 锁文件 yarn.lock | 跨环境依赖版本一致 |
| 安全性 | 校验包完整性 | 防止包被篡改 |
| 离线能力 | 缓存已安装包 | 无网时可复用缓存 |
关键机制
1. 并行安装
Yarn: [A][B][C][D] 同时下载(多线程)
npm: [A]→[B]→[C]→[D] 顺序下载(单线程)
2. 锁文件(yarn.lock)
# yarn.lock 示例
vue@3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.0.tgz"
integrity sha512-xxx
dependencies:
"@vue/shared" "^3.0.0"
作用:确保团队所有成员安装的依赖版本完全一致
对比 npm
| 特性 | Yarn | npm |
|---|---|---|
| 安装速度 | 更快(并行) | 较慢(串行) |
| 锁文件 | yarn.lock(默认) | package-lock.json(npm 5+) |
| 工作空间 | 原生支持(Monorepo) | npm workspaces(较晚支持) |
| 离线安装 | 原生支持 | 有限支持 |
| 缓存 | 全局缓存 | 局部缓存 |
核心命令对比
| 操作 | Yarn | npm |
|---|---|---|
| 初始化 | yarn init |
npm init |
| 安装依赖 | yarn install |
npm install |
| 添加依赖 | yarn add <包> |
npm install <包> |
| 添加开发依赖 | yarn add <包> -D |
npm install <包> --save-dev |
| 删除依赖 | yarn remove <包> |
npm uninstall <包> |
| 运行脚本 | yarn run <脚本> |
npm run <脚本> |
| 全局安装 | yarn global add <包> |
npm install -g <包> |
使用场景
大型项目
- Monorepo 架构(如多个子项目共享依赖)
- 依赖包数量多(1000+),需要快速安装
团队协作
- 强调跨环境一致性(CI/CD、开发/生产环境)
性能敏感
- CI/CD 流程中依赖安装时间过长
离线需求
- 内网环境或不稳定的网络环境
实际案例
场景:优化 CI/CD 构建时间
原方案(npm):
npm install # 耗时 3分钟
改用 Yarn:
yarn install # 耗时 45秒(缓存命中)
时间节省:75%
💡 现实建议
| 场景 | 推荐工具 |
|---|---|
| 新项目、追求速度 | Yarn |
| 遗留项目、团队习惯 | 保持现有工具 |
| Monorepo | Yarn 或 pnpm |
| 极简需求 | npm(已足够) |
实战部署
这里我们部署一个 广告后台管理的项目,命令如下:
bash
yangyanping@yangyaningdeAir ad_admin % yarn cache clean
yarn cache v1.22.22
success Cleared cache.
✨ Done in 6.09s.
yangyanping@yangyaningdeAir ad_admin % yarn install
yarn install v1.22.22
[1/4] 🔍 Resolving packages...
success Already up-to-date.
$ husky install
husky - Git hooks installed
✨ Done in 3.96s.
yangyanping@yangyaningdeAir ad_admin % yarn serve
yarn run v1.22.22
$ vue-cli-service serve
INFO Starting development server...
[92%] sealing (asset processing ThemeColorReplacer)
DONE Compiled successfully in 13157ms 22:47:29
App running at:
- Local: http://localhost:8011/
- Network: http://192.168.31.90:8011/
Note that the development build is not optimized.
To create a production build, run yarn build.
