前端进阶之Yarn使用教程

Yarn是一个通过它可以使用全世界开发者的代码，或者分享自己的代码的JavaScript 包管理工具，也是 一个未来可能取代npm的新型包管理器。

就像官网介绍的一样，通过Yarn你可以使用其他开发者针对不同问题的解决方案，使自己的开发过程更简单 使用过程中遇到问题，你可以将其上报或者贡献解决方案。一旦问题被修复，Yarn会更新保持同步。这也是我们需要去了解的原因之一吧。

Yarn安装

在windows系统上Yarn有三种安装方式：

0. 直接下载.msi安装文件，直接运行安装即可
1. Scoop命令安装，Scoop 是一个 Windows 的命令行安装程序，你可以用下面这些指令安装 Scoop。scoop install yarn3.Chocolayey安装，如果已经安装了 Chocolatey，则可以在控制台中运行下面的命令安装 yarn：

 scoop install yarn

当然，一般我们都剑走偏锋，今天我们用第四张安装方式---npm，这也是比较快速简单的方式：

npm install -g yarn

安装完成后，通过打印版本号，验证是否安装成功：

yarn --version

初始化项目

创建一个项目文件夹，进入到项目目录执行下面命令：

yarn init

执行完成后，会在根目录下生成一个yarn-error.log文件，如下图：

添加依赖包

通过使用 yarn add [package-name]命令，来添加依赖包，以下面添加jquery包为例：

yarn add jquery

第一次添加成功后，根目录会在多生成三个文件，一个node_modules文件夹（以后所有的依赖包都会默认放在这个里面），一个package.json文件，里面会自动生成你安装的依赖包名称以及版本号，还有一个yarn.lock文件：

//package.json文件
{
 "dependencies": {
 "jquery": "^3.4.1"
 }
}

批次添加包

一批次多个包添加，只需要下面一个命令就ok了（以安装bootstrap和vue为例）：

yarn add bootstrap vue

这速度怎能用一个快字形容，秒完成的事，这也是相对于npm，我更习惯yarn的一方面

更新指定版本的包文件

在我们用到不同的包文件时，有时候可能需要升级或者降级版本号，所以这时候就用得上下面的操作命令，更新指定版本的包文件：

#yarn upgrade package-name@版本号
#还是以jquery为例
yarn upgrade jquery@2.1.4

执行完成后，package.json文件里就会生成对应的包版本号

生成指定版本的包文件

既然可以更新到指定版本的包文件，那么再生成的时候，我们就可以指定生成不同版本的包文件，如下命令：

#yarn add package-name@版本号
yarn add jquery@2.1.4

将包更新到最新版本

只需要执行yarn upgrade --latest [package-name]，就能生成最新版本的包文件：

#yarn upgrade --latest [package-name]
yarn upgrade --latest jquery

删除包文件

#yarn remove [package-name]
yarn remove jquery

安装项目的全部依赖

执行下面命令，就可以安装所有的yarn下的包文件：

yarn
#或者
yarn install

yarn.lock （自动锁定安装包版本）

前面我们提到过，安装第一个包文件后，根目录会有一个yarn.lock文件生成。在Npm 中有一个名为 shrinkwrap 的特性，其目的是在生产环境中使用时锁定包依赖。shrinkwrap 的挑战是每个开发者都必须手动运行 npm shrinkwrap 生成 npm-shrinkwrap.json 文件。

使用 Yarn，则截然不同。在安装过程中，会自动生成一个 yarn.lock 文件，yarn.lock 会记录你安装的所有大大小小的。有点类似 PHP 开发者们所熟悉的 composer.lock。yarn.lock 锁定了安装包的精确版本以及所有依赖项，只要你不删除 yarn.lock 文件，再次运行 yarn install 时，会根据其中记录的版本号获取所有依赖包。有了这个文件，你可以确定项目团队的每个成员都安装了精确的软件包版本，部署可以轻松地重现，且没有意外的 bug。你可以把 yarn.lock 提交到本库里，这样其他签出代码并运行 yarn install 时，可以保证大家安装的依赖都是完全一致的。

例如咱们上面安装的jquery，bootstrap，vue会在yarn.lock中有记录，如下图：

根目录下创建一个yarn的文件夹，并将 package.json 和 yarn.lock文件从 yarnDemo文件夹中复制过来。

进入yarn 文件夹 执行 yarn命令，即可一键下载 yarn.lock 中记录的依赖包，相当方便快捷：

你，值得拥有！！！