Vue入门到精通五之yarn部署项目

什么是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.
相关推荐
Luna-player2 小时前
npx create-vue 创建 Vue 3 项目的交互式配置界面
前端·javascript·vue.js
还是大剑师兰特2 小时前
const { proxy } = getCurrentInstance() 的正确使用方法
前端·javascript·vue.js
zhengzhengwang2 小时前
react18升级新特性
前端·javascript·react.js
Reisentyan2 小时前
[vue 3]HTML Learn Data Day 8
前端·vue.js·html
程序员小李白2 小时前
ES6详细解析
前端·ecmascript·es6
We་ct2 小时前
LeetCode 39. 组合总和:DFS回溯解法详解
前端·算法·leetcode·typescript·深度优先·个人开发·回溯
yeshihouhou2 小时前
redisson实现延迟队列
java·前端·数据库
明码2 小时前
Pathlib库
java·服务器·前端