工程化之包管理器yarn,一次说明白前端在中的使用

233 阅读10分钟

Yarn 是 Facebook 开发的一个快速、可靠且安全的 JavaScript 包管理工具。它在前端开发中承担着类似 npm 的角色,但提供了一些不同的特性和优势。以下是 Yarn 在前端中涉及的几个关键方面:yanr v1yanr v2 目前最新的文档

什么是yarn

Yarn 对你的代码来说是一个包管理器。它可以让你使用并分享 全世界开发者的(例如 JavaScript)代码。 Yarn 能够快速、安全、 并可靠地完成这些工作,所以你不用有任何担心。

通过Yarn你可以使用其他开发者针对不同问题的解决方案,使自己的开发过程更简单。 使用过程中遇到问题,你可以将其上报或者贡献解决方案。一旦问题被修复, Yarn会更新保持同步。

代码通过 包(package)  (或者称为 模块(module) ) 的方式来共享。 一个包里包含所有需要共享的代码,以及描述包信息的文件,称为 package.json 。同npm、pnpm具备相同功能各有特色~

Yarn在前端的涉及方面

1. 安装速度

  • 缓存机制: Yarn 会缓存每个下载的包,当你再次安装相同的包时,Yarn 会直接从缓存中获取,而不需要重新下载,从而提高了安装速度。
  • 并行安装: Yarn 支持并行安装多个包,这减少了安装时间,特别是在大型项目中。

2. 确保一致性

  • 锁定文件: Yarn 使用 yarn.lock 文件来锁定所有依赖的具体版本。这确保了无论在何处安装,依赖之间的版本都是一致的,避免了由于版本问题导致的运行错误。

3. 清晰的输出

  • 简洁的命令行输出: Yarn 的命令行输出比 npm 更加友好和直观,能够清晰显示安装过程中的每一步。

4. 工作区支持

  • 工作区(Workspaces) : Yarn 对工作区有内置支持,允许开发者在单一代码库中管理多个包,适用于多包(monorepo)结构的项目。通过使用工作区,可以在多个包之间共享依赖,提升整体开发效率。

5. 插件体系

  • 可扩展性: Yarn 采用插件架构,支持通过插件来扩展其功能。例如,可以通过插件添加新的依赖解析策略、构建脚本等。

6. 自动审计

  • 安全性: Yarn 有内置的安全性检查,会自动扫描项目中的依赖,发现并修复已知的安全漏洞。

7. 易于使用的 CLI 命令

  • 常用命令

    • yarn init:初始化一个新的项目,生成 package.json
    • yarn add <package-name>:添加一个新依赖,并将其记录到 dependencies 中。
    • yarn add <package-name> --dev:添加开发依赖,记录到 devDependencies 中。
    • yarn remove <package-name>:卸载指定的依赖。
    • yarn upgrade:升级项目中所有依赖至最新版本。
    • yarn install:安装 package.json 中列出的所有依赖。

8. 兼容性

  • 与 npm 兼容: Yarn 可以与 npm 配合使用,基本上可以在任何使用 npm 的项目中替换成 Yarn,且大多数命令相似。

9. 跨平台支持

  • 多环境兼容: Yarn 支持在不同的平台(Windows、macOS、Linux)上工作,能够提供一致的体验。

yarn 安装

1. 安装 Node.js

Yarn 是一个基于 Node.js 的包管理工具,因此首先需要确保你的系统上已经安装了 Node.js。可以通过以下命令检查 Node.js 是否已安装:

node -v

如果尚未安装 Node.js,可以从 Node.js 官网 下载并安装适合你操作系统的版本。

2. 使用 npm 安装 Yarn

Yarn 可以通过 npm 进行安装。打开终端或命令提示符,运行以下命令:

npm install --global yarn

3. 使用 Homebrew 安装(macOS 用户)

如果你是 macOS 用户,可以使用 Homebrew 来安装 Yarn,这样操作也会更简便。首先,确保安装了 Homebrew,然后运行以下命令:

brew install yarn

如果不想安装 Node.js,可以添加 --ignore-dependencies 标志:

brew install yarn --ignore-dependencies

4. 使用 Chocolatey 安装(Windows 用户)

对于 Windows 用户,可以使用 Chocolatey 来安装 Yarn。首先确保已安装 Chocolatey,然后在命令提示符中运行以下命令:

choco install yarn

5. 使用 Installer

Yarn 还可以从其官方网站上下载 Windows Installer 对于 Windows 用户。访问 Yarn 官网 选择适合的安装方式。

6. 验证安装

安装完成后,可以通过以下命令验证 Yarn 是否成功安装:

yarn --version

如果成功,会返回 Yarn 的版本号,表明安装已成功。

7. 创建新项目

安装后,你可以使用 Yarn 来初始化一个新的项目:

yarn init

yarn常用命令

基本命令

  1. 初始化项目

    # 创建一个新的 `package.json` 文件,初始化项目
    yarn init
    
  2. 添加依赖

    # 安装指定的包并将其添加到 `dependencies` 中
    yarn add <package-name>
    
  3. 添加开发依赖

    # 安装指定的包并将其添加到 `devDependencies` 中
    yarn add <package-name> --dev
    
  4. 卸载依赖

    # 卸载指定的依赖包
    yarn remove <package-name>
    
  5. 更新依赖

    # 更新项目中所有依赖到最新版本
    yarn upgrade
    
  6. 更新特定依赖

    # 更新指定的依赖包到最新版本
    yarn upgrade <package-name>
    

安装依赖

  1. 安装所有依赖

    # 根据 `package.json` 文件安装所有依赖项
    yarn install
    
  2. 安装特定版本的依赖

    #  安装特定版本的依赖包
    yarn add <package-name>@<version>
    

查看依赖

  1. 查看已安装的依赖

    # 列出项目中已安装的所有依赖包及其版本
    yarn list
    

工作区支持

  1. 使用工作区

    #  查看工作区的信息,适用于多包管理的项目
    yarn workspaces info
    

脚本命令

  1. 运行脚本

    # 运行在 `package.json` 中定义的脚本
    yarn run <script-name>
    

清理和维护

  1. 清理依赖

    # 清除 Yarn 的缓存
    yarn cache clean
    
  2. 检查安全性

    # 检查项目中的依赖是否存在已知的安全漏洞
    yarn audit
    

配置文件

1. package.json

  • 作用:这是一个项目的核心配置文件,定义了项目的基本信息和依赖关系。

  • 内容

    • 项目名称、版本、描述、作者、许可证等元数据。
    • dependencies:列出项目的生产依赖。
    • devDependencies:列出项目的开发依赖。
    • scripts:定义可运行的脚本命令(如启动、测试等)。

示例:

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "A simple project",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "jest"
  },
  "dependencies": {
    "react": "^17.0.2",
    "axios": "^0.21.1"
  },
  "devDependencies": {
    "webpack": "^5.52.0",
    "eslint": "^7.25.0"
  },
  "author": "Your Name",
  "license": "MIT"
}

2. yarn.lock

  • 作用:自动生成的文件,用于锁定项目中所有依赖的具体版本,确保不同环境中的安装一致性。

  • 内容

    • 记录每个依赖及其子依赖的版本信息和来源链接。
    • 确保在运行 yarn install 时能够得到相同的依赖版本。

示例:

"react@^17.0.2":
  version "17.0.2"
  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#0b9b9f..." # checksum
  integrity sha512-...
  dependencies:
    "loose-envify" "^1.1.0"

3. .yarnrc 和 .yarnrc.yml

  • 作用:用于配置 Yarn 的行为,有多个命名形式。yarnrc 用于 Yarn 1.x,而 yarnrc.yml 是 Yarn 2.x 及更高版本的配置文件。

  • 内容

    • 配置 Yarn 的注册表、缓存路径、并发数量等选项。

示例(对于 .yarnrc.yml):

nodeLinker: node-modules
registry: "https://registry.npmjs.org/"

4. yarn-workspace.yaml(如果使用 Yarn 2.x 的工作区)

  • 作用:定义和配置 Yarn 工作区的文件,与 package.json 互补使用。

  • 内容

    • 定义项目中包含的所有包的路径。

示例:

packages:
  - "packages/*"
  - "libs/*"

yarn在react项目中稍微比较欢迎的原因同时也是yarn自身优势

1. 快速安装

Yarn 提供的缓存机制和并行安装能力,使得安装依赖的速度比 npm 更快。在大规模的 React 项目中,安装和管理大量依赖包时,这种速度提升显得尤为重要。

2. 锁定版本

Yarn 使用 yarn.lock 文件来确保在不同环境中安装的依赖版本一致。这对于 React 项目特别重要,因为多个开发者可能在不同的环境中工作,确保使用相同版本的依赖能够避免不必要的兼容性问题。

3. 工作区支持

Yarn 对于多包项目(monorepo)有很好的支持,允许将多个相关的 React 包组织在一个代码库中。这对于大型应用或者需要维护多个模块的项目尤为重要。

4. 友好的命令行体验

Yarn 提供了更加友好的命令行输出和更易于理解的错误信息,这使得开发者在使用过程中更加高效。

5. 社区和生态支持

Yarn 在 React 社区中得到了广泛的支持,许多教程、样板项目和工具都包含对 Yarn 的使用示例。这种广泛的接受度使得新用户能够更容易上手。

6. CLI 的一致性

由于许多 React 开发者习惯使用 Yarn,因此在社区和团队中的一致性使用也促进了团队的协作和效率。

yarn和pnpm对比

Yarn 和 pnpm 都是 JavaScript 的包管理工具,为开发者提供了高效管理依赖的能力,但它们在实现细节、性能和特点上有一些不同。以下是两者的对比:

1. 安装速度

  • Yarn

    • Yarn 提供了缓存机制和并行安装功能,能够加快依赖项的下载和安装速度。它会缓存每个下载的包,并尽可能同时处理多个包的安装。
  • pnpm

    • pnpm 通过将包存储到全局内容地址存储中,使用符号链接来提高安装速度。当安装相同版本的包时,pnpm 会直接创建链接而不是复制包,这种机制能显著减少安装时间。

2. 磁盘空间使用

  • Yarn

    • Yarn 会在项目的 node_modules 中安装所有依赖包,重复安装相同的包,可能导致大量磁盘空间的使用。
  • pnpm

    • pnpm 使用符号链接的方式来共享相同版本的包,避免不必要的重复存储,显著节省磁盘空间。

3. 依赖管理

  • Yarn

    • Yarn 有 yarn.lock 文件用于锁定依赖版本,确保在不同环境中一致。
  • pnpm

    • pnpm 使用 pnpm-lock.yaml 进行版本锁定,确保相同的依赖版本和结构,从而减少潜在的版本冲突。

4. 幻影依赖问题

  • Yarn

    • Yarn 对于依赖关系的管理相对宽松,可能在某些情况下导致幻影依赖问题。
  • pnpm

    • pnpm 强制要求每个依赖都明确声明,避免了幻影依赖的出现,其对等依赖的检查更为严格。

5. 工作区支持

  • Yarn

    • Yarn 对于多包项目(monorepo)有非常好的内置支持,允许很方便地管理多个包及其依赖。
  • pnpm

    • pnpm 同样支持工作区,并提供良好的体验,能够在不同包之间有效共享依赖。

6. CLI 和易用性

  • Yarn

    • Yarn 的命令行界面友好,提供直观的输出,易于使用。许多开发者已经习惯使用 Yarn 的命令。
  • pnpm

    • pnpm 的命令和 Yarn 相似,大多数 npm 和 Yarn 命令都可以直接用 pnpm 替代,但是有些特性可能会略有不同。

7. 社区和生态系统

  • Yarn

    • Yarn 在早期得到了广泛的应用和社区支持,许多开源项目都支持 Yarn。
  • pnpm

    • pnpm 逐渐获得了更多社区关注,尤其是在大型项目中,因其性能和磁盘使用优化受到青睐。

总结

  • 性能和效率:pnpm 在安装速度和磁盘空间使用上通常优于 Yarn,尤其是在大型项目和多包环境中。
  • 依赖管理:pnpm 强化了对依赖的管理,避免幻影依赖问题。
  • 易用性:Yarn 在命令行输出和社区支持上更成熟,但 pnpm 也在不断发展,日益受到关注。

选择使用哪种工具通常取决于项目的需求、团队的经验以及个人偏好。两者都是强大的包管理工具,能够满足现代开发的需求。好了介绍完了yarn、npm、pnpm各自的表现和前端涉及到的方方面面,具体的使用场景都是取决于现有技术选型,历史渊源以及前端发展和个人偏好决定的并没有绝对的好坏之分对于包管理器。。。但是目前个人还是比较推荐实用pnpm一统天下~~~~