Yarn 核心优势

  1. 速度更快：采用离线缓存 （下载过的包会缓存到本地，无需重复下载） 和并行安装 （同时下载多个包，而非串行），安装速度远快于传统 npm；
  2. 确定性：通过 yarn.lock 锁定依赖版本，确保同一项目在不同环境下安装的依赖版本完全一致 （npm 后来也通过 package-lock.json 实现了类似功能，但 Yarn 更早且更稳定）；
  3. 安全性：安装包前会校验包的哈希值，防止包被篡改或恶意注入；
  4. 更友好的命令行体验：错误提示更清晰，支持交互式操作 （如选择版本、确认依赖冲突）；

Yarn 核心概念

  1. yarn.lock：

    1. 自动生成的锁文件，记录项目中所有依赖的精确版本、下载地址和哈希值；
    2. 必须提交到 Git 仓库，确保团队成员 / 部署环境安装的依赖版本一致；
    3. 无需手动修改，Yarn 会在安装 / 更新依赖时自动更新；

  2. 缓存目录：

    1. Yarn 会将下载的包缓存到本地 （默认路径：~/.yarn/cache），后续安装相同包时直接从缓存读取，无需联网；
    2. 可通过 yarn cache clean 清理缓存，yarn cache dir 查看缓存路径；

  3. 工作区 （Workspaces）：适用于多包仓库 （Monorepo），可将多个子项目的依赖统一管理，避免重复安装，简化依赖共享；

安装 Yarn

  1. 通过 npm 安装 （推荐）：

    # 全局安装 Yarn
npm install -g yarn

# 验证安装（查看版本）
yarn --version

  2. 其他安装方式 （可选）：

    1. macOS：brew install yarn；
    2. Windows 下载安装包
    3. Linux 参考官方文档

核心命令（高频使用）

命令 作用 对应 npm 命令
yarn init 初始化项目，生成 package.json npm init
yarn / yarn install 安装 package.json 中的所有依赖 npm install
yarn add <包名> 安装包并添加到 dependencies npm install <包名>
yarn add <包名> --dev 安装包并添加到 devDependencies npm install <包名> --save-dev
yarn add <包名>@<版本> 安装指定版本的包 npm install <包名>@<版本>
yarn remove <包名> 卸载包 npm uninstall <包名>
yarn upgrade <包名> 更新指定包 npm update <包名>
yarn upgrade 更新所有包 npm update
yarn run <脚本名> 执行 package.json 中的脚本 npm run <脚本名>
yarn global add <包名> 全局安装包 npm install -g <包名>
yarn global remove <包名> 全局卸载包 npm uninstall -g <包名>
yarn cache clean 清理本地缓存 npm cache clean --force

关键使用场景示例

  1. 初始化项目：

    yarn init -y  # -y 跳过交互，直接生成默认的 package.json

  2. 安装依赖：

    # 安装生产依赖（dependencies）
yarn add react react-dom

# 安装开发依赖（devDependencies）
yarn add webpack webpack-cli --dev

# 安装指定版本
yarn add axios@1.6.0

# 安装所有依赖（根据 package.json 和 yarn.lock）
yarn

  3. 运行脚本：

    {
  "scripts": {
    "start": "react-scripts start",   // yarn run start  # 简写：yarn start
    "build": "react-scripts build"    // yarn run build  # 简写：yarn build
  }
}

  4. Monorepo 工作区 （Workspaces）：

    • 在项目根目录的 package.json 中配置：
    {
  "name": "monorepo-demo",
  "private": true,
  "workspaces": [
    "packages/*"  # 所有子项目放在 packages 目录下
  ]
}

    • 此时在根目录执行 yarn install，Yarn 会自动识别所有子项目的依赖，统一安装到根目录的 node_modules，并生成统一的 yarn.lock，避免重复依赖；

Yarn 与 npm 的核心区别

特性 Yarn npm (v6+)
锁文件 yarn.lock package-lock.json
安装速度 快 （并行 + 缓存） 较慢 （早期串行，v7+ 优化）
离线安装 原生支持 需要手动配置
工作区 原生支持 v7+ 支持 （npm workspaces）
交互体验 更友好 （彩色提示、进度条） 相对简陋
安全性 安装前校验哈希 需手动开启校验

常见问题与解决方案

  1. yarn.lock 冲突：

    1. 原因：多人协作时修改了依赖，导致 lock 文件冲突；
    2. 解决：删除冲突的 yarn.lock，重新执行 yarn install 生成新的 lock 文件，再提交；

  2. 缓存导致安装异常：

    1. 解决：执行 yarn cache clean 清理缓存，再重新安装；

  3. 全局安装的包找不到：

    1. 原因：Yarn 全局包的路径未加入系统环境变量；
    2. 解决：执行 yarn global bin 查看全局包路径，将其添加到系统 PATH 中；
打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

你好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. Yarn 核心优势
  2. 2. Yarn 核心概念
  3. 3. 安装 Yarn
  4. 4. 核心命令（高频使用）
  5. 5. 关键使用场景示例
  6. 6. Yarn 与 npm 的核心区别
  7. 7. 常见问题与解决方案