Yarn安装与配置技巧,前端包管理工具快速上手指南

阿木 发布于 20 小时前 3 次阅读


说实话,我真服了。

2016年那会儿,我们都在干嘛?

还在眼巴巴地瞅着npm那个转动的进度条,去装个lodash,这期间能去倒上一杯咖啡。

那个时候,Facebook的工程师实在无法忍受了,猛地一拍桌子,大声声称,“咱们自己动手搞出一个来”。

随之,Yarn出现了 ,仿若一群已经对绿皮火车厌烦至极的人径直跨越似地登上了高铁。

安装?

别想得太复杂

网络上存在着大量的教程,它们教授你各种各样的姿势,其中包括Homebrew,还有Chocolatey,甚至是前往官网点击那个安装包。

倒是说实话呀,要是你电脑里头已然存在 Node 了,最为简单直接粗暴的做法便是将终端打开,然后敲下这一行:

npm install -g yarn

切勿发笑,借助npm去安装Yarn着实存在些许黑色幽默,然而这恰似“运用移动充值来给联通进行缴费”,最终能够实现拨通即可。

Mac用户如果讲究点,可以:

brew install yarn

然后等着那堆代码跑完。

装完怎么看成没成功?

这问题特傻,但每次我都得查。

你就敲:

yarn --version

蹦出一串数字,比如1.22.22,成了。

没蹦?

npm install -g yarn

这表明,PATH环境变量再度与你对着干,前往.bash_profile里增添一行export,这可是老调重弹了。

别急着用,先改个配置

国内这网络环境你懂的。

默认情况下,Yarn所走的路径是https://registry.npmjs.org/ ,其速度慢得如同蜗牛一般,极其迟缓。

这时候你得把镜子掰过来:

brew install yarn

yarn config set registry https://registry.npmmirror.com

这步不做,后面你哭都来不及。

淘宝那个镜像现在叫npmmirror了,别搞错。

开始整活,yarn init

choco install yarn

进到你那个乱七八糟的项目文件夹,敲:

yarn init

接着它会向你询问一连串问题,像是名字、版本、描述之类的……我通常是一路直接回车,反正后续都是能够进行修改的。

最终呈现出一个package.json,这便是你项目的“身份证”。

装包,yarn add才是灵魂

这才是Yarn最爽的地方。

yarn --version

想装个React?

yarn add react

会发现屏幕刷刷刷滚动,并非npm那般冗长的垃圾日志,Yarn的输出简洁如苹果发布会,甚至还带有表情符号。

并且它运用的是并行下载方式,并非像npm那般逐个依次排队进行安装,速度快到超乎想象。

设若你所安装的那个包版本号为“^16.0.0”,不同同事所安装的情况或许存在差异(有人安装的是16.0.1,有人安装的是16.0.9),随后项目便出现问题了。

Yarn直接为你生成一个yarn.lock文件,将版本锁定,任何人都无法改动。

那个神奇的yarn.lock

这文件千万别手改!

千万别!

它就是一份“合同”,记录了所有依赖的确切版本。

你上传至Git里头,同事将其拉取下来运行yarn(留意是yarn而非yarn install,这二者大致相同),所安装出来的依赖跟你的毫无二致。

yarn init

这被称作是“确定性依赖管理”,听起来显得高端大气上档次,实际上呢,不过就是为了避免承担责任罢了。

日常操作三板斧

加个开发依赖(比如Webpack这种打包工具):

yarn add webpack --dev

yarn add [package-name]

想卸载某个包:

yarn remove lodash

想更新所有包:

yarn add lodash

yarn upgrade

或者交互式地选着更新:

yarn upgrade-interactive

yarn remove [package-name]

这个指令极其便利,它能够罗列出哪一些软件包存在新的版本,经由空格键来进行勾选操作,按下回车键便完成处理。

高级玩法,.yarnrc的玄学

项目大了,你可能想把缓存挪个地方,或者设置个代理。

yarn upgrade [package-name]

这时候在项目根目录建个.yarnrc文件就行。

比如:

# 设置自定义缓存目录
cache-folder "./.yarn-cache"

但说实话,小项目根本用不上。

关于Workspaces

这东西相当厉害,适宜那种在单一仓库之中放置好多子项目,也就是名为Monorepo的情形。

假设你存在一个名为my - monorepo的项目,其中在packages文件夹之下包含app1以及app2,它们共同使用着一个node_modules。

在根package.json里写:

{
"private": true,
"workspaces": ["packages/*"]
}

那么,在进行装依赖这个操作的时候,Yarn它会自动地将那共同的包给“提升”到根目录那里去,以此来避免每个子项目都要去装一遍lodash,能够节省硬盘空间。

Yarn发展到今天,已经不只是“快”了。

cache-folder ./custom-cache

它愈发类似一个管家,将你项目之中那些杂乱无章的依赖关系梳理得清清楚楚,条理分明。

写代码已经够烦了,就别让包管理器再给你添堵。