Yarn 构建工具入门基础

一、yarn的背景和介绍

一直以来,我们在安装和管理依赖的时候基本上都会使用npm,npm是一个非常优秀全面且广受欢迎的包管理工具,它奠定了前端模块化开发的基石,为前端的发展做出了不可磨灭的贡献。

yarn就是一个类似于npm的包管理工具,它是由facebook推出并开源。鉴于facebook在前端界的影响力,yarn一面世就很受瞩目,受到了前端界的广泛欢迎。

与npm相比,yarn有着众多的优势,主要的优势在于:速度快,离线模式,版本控制。

1、速度快。

npm会等一个包完全安装完才跳到下一个包,但yarn会并行执行包,因此速度会快很多。网上有不少比较npm和yarn安装同样多依赖的执行速度,yarn在速度方面优势明显。实际项目中体验一下真是飞一样的速度,谁有试过谁知道~

2、离线模式,

离线的原理比较简单,安装过的包会被保存进缓存目录,以后安装就直接从缓存中复制过来,这样做的本质还是会提高安装下载的速度,避免不必要的网络请求。

3、版本控制

npm用下来比较强的一个痛点就是:当包 的依赖层次比较深时,版本控制不够精确。会出现相同package.json,但不同人的电脑上安装出不同版本的依赖包,出现类似 “我电脑上是好的,没问题呀”的bug很难查找。你可以使用npm-shrinkwrap来实现版本固化,版本信息会写入npm-shrinkwrap.json文件中,但它毕竟不是npm的标准配置。
而yarn天生就能实现版本固化。会生成一个类似npm-shrinkwrap.json的yarn.lock文件,文件内会描述包自身的版本号,还会锁定所有它依赖的包的版本号:


yarn.lock存储这你的每个包的确切依赖版本,能确保从本地开发到生产环境,所有机器上都有精确相同的依赖版本。



二、yarn的安装、用法和基本工作流

1、安装(以mac为例)

Homebrew

你可以通过 Homebrew 包管理工具安装 Yarn。 如果你还未安装 Node.js,Homebrew 会自动为你安装。

brew update
brew install yarn

设置路径

你需要设置你终端的 PATH 环境变量,以便全局访问 Yarn 的可执行文件。
添加`export PATH="$PATH:`yarn global bin`"`到你的 profile 文件(也可能是 .profile.bashrc.zshrc 等文件)。


2、用法

初始化一个新的项目

yarn init 

添加一个依赖包

yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]

更新一个依赖包

yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]

删除一个依赖包

yarn remove [package]

安装所有的依赖包

yarn

or

yarn install


3、工作流

对于依赖管理来说,在项目中使用一个新的包管理器就是使用了一个新的工作流。 Yarn 将尽其最大的努力不侵入你的工作方式,并且使其工作流中的每一步都能简单易懂。

您需要知道一些基本的工作流的知识:

创建一个新的项目
添加/更新/删除依赖包
安装/重新安装依赖包
使用版本管理工具(例如 git)
持续集成

(1)、创建一个新项目

不论是已经有了现成的代码仓库(目录),还是正着手启动一个全新项目,你都可以使用同样的方法引入Yarn。
在命令行终端里,跳转到准备引入Yarn的目录(通常是一个项目的根目录),执行以下命令:

yarn init

这将打开一个用于创建Yarn项目的交互式表单,其中包含以下问题:

name (your-project):
version (1.0.0):
description:
entry point (index.js):
git repository:
author:
license (MIT):

你既可以回答这些问题,也可以直接敲回车键(enter/return)使用默认配置或者留空。

现在应该创建了一个和下面文件内容类似的 package.json

{
  "name": "my-new-project",
  "version": "1.0.0",
  "description": "My New Project description.",
  "main": "index.js",
  "repository": {
    "url": "https://example.com/your-username/my-new-project",
    "type": "git"
  },
  "author": "Your Name <you@example.com>",
  "license": "MIT"
}

执行yarn init之后,除了以上文件被创建之外,没有任何副作用。你可以随意编辑此文件。
package.json文件里存储了项目的有关信息。 包括项目名称、维护者信息、代码托管地址,以及最重要的:项目依赖。

(2)、管理依赖项

你需要了解几若干个用于增加、更新、删除依赖项的命令。
每个命令都会更新package.jsonyarn.lock 文件。

在使用一个包之前,你需要执行以下命令将其加入依赖项列表:

yarn add [package]

[package]会被加入到package.json文件中的依赖列表,同时yarn.lock也会被更新。

  {
    "name": "my-package",
    "dependencies": {
+     "package-1": "^1.0.0"
    }
  }

你可以用以下参数添加其它类型的依赖:

  • yarn add --dev 添加到 devDependencies
  • yarn add --peer 添加到 peerDependencies
  • yarn add --optional 添加到 optionalDependencies
    通过指定依赖版本标签,你可以安装一个特定版本的包:
yarn add [package]@[version]
yarn add [package]@[tag]

[version][tag] 会被添加到 package.json,并在安装依赖时被解析。
例如:

yarn add package-1@1.2.3
yarn add package-2@^1.0.0
yarn add package-3@beta
{
  "dependencies": {
    "package-1": "1.2.3",
    "package-2": "^1.0.0",
    "package-3": "beta"
  }
}



更新依赖包

yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]

这会更新package.jsonyarn.lock 文件。

  {
    "name": "my-package",
    "dependencies": {
-     "package-1": "^1.0.0"
+     "package-1": "^2.0.0"
    }
  }

删除依赖包

yarn remove [package]

这会更新package.jsonyarn.lock 文件。


(3)、安装依赖项

如果刚从版本控制系统里 checkout 一个包,则需要为其安装依赖。

如果是为现有的包增加依赖,那么这些新的依赖会自动安装。

yarn install 是用于安装一个项目的所有依赖。 Yarn会从package.json中读取依赖,并将依赖信息存储到yarn.lock中。

如果你正在开发一个包,通常你会在以下情况之后进行依赖安装:

  1. 你刚检出需要这些依赖项的项目代码。
  2. 项目的另一个开发者添加了新的依赖,你需要用到。

安装选项
有很多参数可以控制依赖安装的过程,包括:

  1. 安装所有依赖:yarnyarn install
  2. 安装一个包的单一版本:yarn install --flat
  3. 强制重新下载所有包:yarn install --force
  4. 只安装生产环境依赖:yarn install --production

您可以传递给 yarn install完整参数列表

(4)、配合版本控制

为了使其他人能够使用你的包,或者能够对其进行后续开发,你需要确保将所有必须的文件提交到你所使用的版本控制系统。

为了别人能使用你的包,以下文件必须被提交进版本控制系统:

  • package.json:包含包的所有依赖信息;
  • yarn.lock:记录每一个依赖项的确切版本信息;
  • 包实现功能的实际项目代码。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,376评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,126评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,966评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,432评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,519评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,792评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,933评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,701评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,143评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,488评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,626评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,292评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,896评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,742评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,324评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,494评论 2 348

推荐阅读更多精彩内容

  • Yarn 初始化一个项目 yarn init 相当 npm init yarn add添加一个包 相当 ...
    FConfidence阅读 28,815评论 5 19
  • 这篇文章已经被 Adrian Sandu, Marcello La Rocca, Matt Burnett, Nu...
    lucy_阅读 9,042评论 4 16
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 PS:转载请注明出处作者:TigerChain地址:http...
    TigerChain阅读 21,284评论 3 13
  • 官方文档yarn upgrade 升级依赖 如果提示有新版本,但是当前版本不是最新的,运行yarn 就会自动安装更...
    没听说过的花名阅读 3,242评论 0 2
  • ----效果篇 效果:一般采取事实、公众常识、证据、逻辑,判断一个动作是否有效,不是我以为的,避免陷入自我思维瓶颈...
    风信子up阅读 569评论 0 0