前端开发 / 依赖管理工具 Yarn 简介

依赖管理工具 Yarn 简介

yarnlogo
大家好,今天我们开始一个新专题 — Yarn。了解前端开发的同学可能会习惯于使用 npm 或者
cnpm 作为我们项目的包管理工具,它们在给我们的日常开发带来便利的同时,也伴随着,如:安装慢、无法保持包的一致性等让开发者头疼的问题,于是作为 Npm 的直接竞争对手 Yarn 诞生了,本文将从 Yarn 是什么,它有哪些优点,如何使用等方面向大家详细介绍 Yarn。

1. Yarn 的前世今生

1.1 包管理工具的介绍

大家都知道 Yarn 是包管理工具,那么在学习 Yarn 之前,我们有必要讨论一下,包管理工具是什么。

在近几年之前得前端项目中,我们聪明得前端工程师们就已经开始使用如 jQuery 等经典的第三方 JS 工具库,这大大得提高了我们前端项目得开发速度。 我们使用它的方法一般为,在 jQuery 官网上下载相关版本得 JS 静态文件,然后放到我们自己的项目中,引用它封装的相关方法去实现我们的需求,或者还有其他得一些如 CDN 引用等方式。

使用了一段时间之后,我们发现,这种开发方式,比之前我们纯手写或者复制粘贴代码的效率快了一大截,但是也暴露出一些致命缺陷,如以下使用场景:

  • 如果我们引用的 lib1.js,它同时依赖于lib2.js 和 lib3.js,那么我们在下载 lib1.js 的同时,也要将 lib2.js 和 lib3.js 一起下载,并且在文件里他们的引用顺序也有讲究,如果 3 个文件的顺序不对,也会出现一些莫名其妙的问题。
  • 第三方 JS 工具库的作者可能会增加、优化一些代码逻辑,或者只是修改一些其他开发者提出的 Bug,然后他们会把最新代码包发布到自己的官网。而作为开发者的我们,就要经常关注这些项目里使用的第三方库的动态,如果升级就要重复之前的操作,将文件重新手动下载下来,替换项目中之前的文件。
  • 工具的版本问题,我们想升级项目中的依赖工具,就要去寻找资源,手动下载,手动替换。

在这些问题被发现之后,一批富有开拓精神的程序员们提出了他们新的想法和思路,于是 npm 的出现,彻底的终结了以上这些问题。

1.2 Npm 的横空出世

作为各种包管理工具中最早出现的开拓者,Npm 是 Node.js 官方提供的,他的出现同时也制定了一些列的包管理规范,如:

  • 将所有第三方依赖包放在 node_modules 这个文件目录下,我们在增加,删除,升级依赖也只是更新这个文件下的相关依赖包。
  • 增加 package.json 文件,这个文件中存放本项目及项目的依赖和版本信息,这样我们就可以一目了然的了解本项目用到了什么,都是什么版本的,不用多处寻找。
  • 在使用依赖时,Node 提供的支持是内置的 require 方法,默认会到这个目录下去检索模块,无需手动指定路径。

如此一来,有了 Npm 的加持,JavaScript 从一门不被看好得弱类型语言,发展到了现在可以胜任大型前端项目开发,实现模块化,工程化的前端项目搭建,稳定了前后端分离的发展思路。

Npm 已经奠定了前端工程基础,但是追求完美的前端程序员们又基于 Npm 不足的地方,提供了新的完善思路,针对如 Npm 安装包的速度问题,包的版本问题加以改善。所以今天我们要学习的 Yarn 就是用来解决这些问题的。

2. Yarn 的介绍

关于 Yarn 官网中有如下介绍:

Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don’t ever have to worry. —官网

简单翻译成中文就是,yarn作为项目的包管理工具,快速、安全、可靠。你下载的包将不再重新下载。而且确保在不同系统中可以正常工作。

这里我们看到Yarn官方推荐的三个特点:

  • 速度快: Yarn 缓存了每个下载过的包,再次使用时无需重复下载。同时它是并行的,因此安装速度更快
  • 安全: 在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。
  • 可靠: 使用详细、简洁的锁文件格式和明确的安装算法,使 Yarn 能够在不同系统上保证无差异的工作。

通过上面的介绍,我们可以总结出:Yarn 是基于 Npm 的不足之处做出了全新的改版升级,但是我们并不能说 Yarn 的出现会完全取代 Npm,因为目前的 Yarn ,只是完善升级了 Npm,让开发者们有了更好的体验,但截至目前为止,Yarn 并没有实现全部的 Npm 命令及功能。

3. 使用 Npm 的缺点(竞品对比)

  • 感受过上文 yarn 安装依赖的速度,对比 Npm,就会感觉等待 Npm 安装进度条是一个很漫长的过程,尤其是在网速不好的情况下,当然大家也可以使用 Npm 在国内的淘宝镜像服务 cnpm,这样速度虽然提升了,但是安装之后运行时的各种问题,也是开发者一直所诟病的,所以在速度上,yarn 碾压 npm
  • 关于错误提示,yarn 做的更加人性化,使用 npm 时,如果安装某一个依赖发生错误,npm 会继续打印之后的安装日志,这样依赖很多的大型项目,开发者很难注意到到底哪里安装报错
  • 在 npm5 之前,npm 安装无法保证版本的一致性,如:“1.0.3”、“~1.0.3”、"^1.0.3"这三个命令分别代表着:安装指定的 1.0.3 版本、安装 1.0.X 中最新的版本、
    安装 1.X.X 中最新的版本,这样虽然更详细,但也给学习中的开发者增加极大的学习成本。

yarn 为了解决以上的问题,增加了 yarn.lock 锁文件,这个方案让开发者不必再担心项目中其他成员安装的依赖版本不同,保证了在不同环境下项目都能完美运行。并且 yarn 的安装日志显然比 npm 更简洁且易于阅读。

4. Yarn 和 npm 能否同时使用?

可以的,上文提到,yarn 是对 npm 进行了安装和提升,实现了 npm大 部分的命令和功能,且二者都遵循 package.json 文件,所以我们也不用担心兼容问题,yarn 完全没有侵入性。我本人在实际运用场景中,也经常使用 yarn 在安装或删除依赖文件,使用 npm 运行项目中定义的如:启动命令,打包命令等,所以二者完全可以同时使用。

5. 在项目中如何安装及使用 Yarn

5.1 安装

yarn 有很多种安装方式,对于不同的系统,我们可以区别安装,在这里我推荐大家使用 Npm 去安装,这种方法最方便简洁。

 npm i -g yarn

5.2 关于使用

在一个新项目中,我们通常按照以下步骤去使用 yarn:

  1. 写入生成package.json,确定项目中需要哪些依赖(如果已有该文件跳过本步骤)。
  2. 执行 yarn 初始化项目依赖,生成 yarn.lock 文件。
  3. 通过yarn add 命令添加需要安装的依赖。
  4. 确定想升级某个依赖的最新版本时,使用yarn upgrad命令升级。

以上是简单介绍关于 yarn 得使用方法,因为在之后得相关小节里,有针对于 yarn 使用方法和常用命令的详细讲解,在这里就不再赘述了。希望大家持续关注之后的章节,更加深入的学习关于 yarn 的知识和技能。

6. 学习与总结

yarn 的学习成本非常低,它本身就是为了简化 npm 的命令,提高安装依赖的速度和效率而诞生的工具,希望同学们可以认真学习,并且在项目中多多实践。

7. 关于前置基础及技能

我们知道,yarn 是跟 npm 很相似的前端依赖管理工具,不过他比 npm 更加方便高效,也更加简单。所以为了方便理解 Yarn 的使用及原理,可以先了解 npm 的用法,当然如果想直接学习 yarn ,相信大家只要认真努力,也一样可以学得会。加油!