章节索引 :

Yarn的工作流示例

前言:大家好,很高兴和大家又见面啦!在之前得几个小节里,主要给大家介绍了 Yarn 得基础知识和相关概念。学习 一门技能只了解基础概念和用法,不去亲自动手尝试是不行的。那么接下来,我会带大家以一个实际的案例,来讲解 yarn 的工作流,以及日常工作中,到底如何去使用 yarn 这个工具。

1. yarn工作流案例示例

1.1 使用 yarn 初始化一个项目

在这里默认大家已经安装好了yarn,如果没有安装的话,前文有讲过,可以使用多种方式,最简单的方法可以使用npm去安装。

首先第一步,执行下面命令,初始化一个项目:

yarn init

效果如图
运行效果

此时会提示你输入一些问题,方便初始化项目信息。如果无需特殊定制化一些信息,可以一路回车键,使用他的默认信息。
运行效果

初始化完成后,初始化的文件夹中,会自动生成一个 package.json 文件,文件中包含初始化时填写的默认信息,如下图:
运行效果

package.json 用于管理包依赖关系。其他的如添加/删除/更新等命令用于管理 package.jsonyarn.lock

1.2 添加一个依赖

使用 yarn add 命令,如添加vue-cli依赖:

yarn add vue-cli

如果不写版本号,默认安装最新版本,如果需要安装指定版本,请按照如下格式添加依赖:

yarn add vue-cli@x.x.x

此操作将自动在 package.json中添加对应的依赖,同时更新yarn.lock文件的版本信息。

我们还可以添加依赖到其他类型的依赖关系如:

yarn add --dev 添加到 devDependencies
yarn add --peer 添加到 peerDependencies
yarn add --optional 添加到 optionalDependencies

具体的依赖关系类型,yarn的官网列举如下:
运行效果

最后,我们执行 yarn add vue-cli,出现 success信息,并提示我们具体安包的数量,说明依赖安装成功 效果如图:
运行效果

我们可以看到我们的package.json文件中多出了预想的依赖信息,并且项目目录中多出了 node_modules 文件夹,所有的依赖相关文件都被安装在了这个文件夹中,大功告成!
运行效果

1.3 使用yarn更新依赖

上文中,我们学习了如何添加依赖,在这里,我们再学习一下如何更新依赖。yarn 更新依赖使用的是 yarn upgrade [package] 命令,这个很简单也很好理解。但是也有一些需要注意得使用点,接下来给大家示范一下。
首先我们初始化一个 webpack依赖,指定版本号为3.5.0

yarn add webpack@3.5.0

此时我们的 package.json 中修改为

"dependencies": {
    "webpack": "3.5.0"
  }

然后我们按照正常的思路,使用 yarn 命令尝试去更新 webpack 依赖

yarn upgrade webpack

虽然控制台没有任何报错,也提示更新成功,但是我们的 package.json 中的配置还是

"dependencies": {
    "webpack": "3.5.0"
  }

这就是我要说明的注意点:yarn upgrade 是按你指定的版本区间升级的,你可以使用 --latest 参数升级到最新版,无视 package.json 中的版本区间。

yarn upgrade webpack --latest
"dependencies": {
    "webpack": "4.43.0"
  }

这样就达到我们想升级依赖到最新版本的目的。

现在示例的是一个依赖,如果有多个依赖,想同时升级到最新版本,需要执行如下命令:

yarn upgrade-interactive

1.4 使用yarn删除依赖

使用yarn删除依赖的命令为 yarn remove ,此命令有几个小技巧,给大家介绍一下。

从当前项目中删除依赖项:

yarn remove lodash

一次从所有工作空间中删除一个依赖项:

yarn remove lodash --all

删除所有以开头的依赖项eslint-:

yarn remove 'eslint-*'

删除@babel范围内的所有依赖项:

yarn remove '@babel/*'

删除所有匹配的依赖项react-dom或react-helmet :

yarn remove 'react-{dom,helmet}'

1.5 补充知识点

总所周知,我们使用 npm 时,因为速度很慢,我们可以使用修改下载源的方式提升下载速度。同样的,使用 yarn 如果有需要,我们同样可以修改下载源(淘宝镜像)。

1.5.1 临时修改(只生效一次):

yarn save [package] --registry https://registry.npm.taobao.org/

1.5.2 设置yarn的配置项(全局配置):

查看yarn源的当前地址

yarn config get registry

设置淘宝镜像

yarn config set registry https://registry.npm.taobao.org/

2. 小结

俗话说:纸上得来终觉浅,绝知此事要躬行。也就是说学习一门技能,不仅要了解它的基础知识和构建原理,最重要的环节是亲自去实践。结合以往的经验,很多时候,在没亲自动手之前,我们觉得自己已经掌握了某个知识点,实际上亲自操作一下,就会遇到各种坑。其实这些也不是坑,就是对某些具体细节的知识点不够了解。只有总结了前人的经验,加上自己实际实践出来的感悟,才能说真的学会了这个技能。所以希望大家可以亲自动手,亲自总结,多多实践!