JS新包管理工具yarn和npm的对比与使用入门


Posted in Javascript onDecember 09, 2016

这篇文章会通过以下几个方面介绍yarn的:

  1. yarn对比npm解决了什么问题,带来哪些便利。
  2. 获取yarn的正确姿势
  3. yarn的使用入门(介绍一些常用的命令
  4. 个人使用心得

yarn对比npm的优点

根据官方文档yarn具有6大优点

1、离线模式

yarn会有一个缓存目录,会缓存以前安装过的软件包,再次安装时就不必从网络下载了,大大加速安装速度。

这一点很重要,npm 饱受诟病的一点就是,每次安装依赖,都需要从网络下载一大堆东西,而且是全部重新下载,工程多的时候比较烦人。

我司部署node项目,是需要在发布机上install所有的依赖而且发布机的网络环境不是很好(不给搭梯子),导致安装慢不说还经常失败(部分包需要联网编译)。更换yarn后只需将yarn的cache目录缓存起来,每次install嗷嗷的快,麻麻再也不用担心发布失败了。

2、依赖关系确定性

在每一台机器上针对同一个工程安装依赖时,生成的依赖关系顺序和版本是一致的。

之前 npm 在这里有一个处理得不好的地方 。举例来说,我写的工程依赖 A, B, C 三个库,我在编写 package.json 的时候,给 A, B, C 都指定了版本号。但是 A 库可能又依赖 D, E, F 库,D 库又依赖 G, H 库。这么多关联依赖关系中,很可能某个库在指定依赖时,没有指定版本号。

于是,这就导致了一个问题。如果我在另一台机器上对同样的工程安装依赖,或者把这台机器工程下的 node_modules 目录删除来重新安装依赖。由于关联依赖中,没有指定版本号的库,发生了版本更新,就会导致再次安装的依赖,其中具体某些软件包的版本是不一致的。在这种情况下,你会发现原来能够正常运行的程序,忽然变得不能工作或一堆 BUG.

npm对包引入顺序也十分的敏感,比如在一个空项目里执行以下命令

npm init -y
npm install globule@0.1.0 -S
npm install babel-generator@6.19.0 -S
npm install babel-helper-define-map@6.18.0 -S

我们这里安装了3个包都依赖于lodash,不过globule依赖lodash@1.0.3,另外两个依赖lodash@4.x。

现在目录依赖结构如下

JS新包管理工具yarn和npm的对比与使用入门

这时假设我们在项目里使用lodash,但是忘记重新安装lodash

var lodash = require('lodash');
console.log(lodash.VERSION); // v1.0.3

另一个同事获取项目代码,执行npm install , 这时的目录依赖结构为

可以看到第一层依赖的lodash变成了4.x版本,这样就造成了依赖版本不一致的问题。而yarn则会保证无论怎样引入的顺序,目录依赖结构都是一致的,确保不会发生这样的BUG。

3、网络性能优化

下载软件时会优化请求顺序,避免请求瀑布发生

4、网络回弹

yarn在某个安装包请求失败时不会导致安装失败,它会自动去尝试重新安装。而npm则会毫不犹豫的失败,导致得再来一次,耗费时间

5、多注册来源

所有的依赖包,不管他被不同的库间接关联引用多少次,安装这个包时,只会从一个注册来源去装,要么是 npm 要么是 bower, 防止出现混乱不一致。

6、扁平模式

对于多个包依赖同一个子包的情况,yarn会尽量提取为同一个包,防止出现多处副本,浪费空间。比如1.2中,yarn会为babel-generator和babel-helper-define-map 创建同一个lodash子依赖,这样就节约一份的空间。

更多的emojis

表情包大战o(?□?)o

JS新包管理工具yarn和npm的对比与使用入门

正确的安装姿势

注意yarn依赖node运行环境,官网提供了不同环境下的N种安装方法,点我查看。其中最重要的也是最通用的当然是npm install yarn -g,也不知道官网搞那么多幺蛾子的安装方式干嘛又是brew又是yum,还折腾半天。

yarn常用命令介绍

创建项目

命令yarn init,详细介绍

跟npm一样,会出现一个交互式的窗口,问一些package相关的问题

question name (testdir): my-awesome-package
question version (1.0.0): 
question description: The best package you will ever find.
question entry point (index.js): 
question git repository: https://github.com/yarnpkg/example-yarn-package
question author: Yarn Contributor
question license (MIT): 
success Saved package.json
✨ Done in 87.70s.

当然可以加参数 --yes/-y 来自动回答所有的问题(yes),便捷的生成一个package.json

管理依赖

注意,以下的命令都会自动更新你的package.json和yarn.lock文件

添加依赖

命令yarn add [package]@[version/tag] ,详细介绍

这会自动把包添加到package.json里的dependencies,也同时会更新yarn.lock

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

添加到不同的dependencies需要加如下参数

  1. yarn add --dev/-D 添加到devDependencies
  2. yarn add --peer/-P 添加到peerDependencies
  3. yarn add --optional/-O 添加到optionalDependencies

更新依赖

命令yarn upgrade [package]@[version/tag] ,详细介绍

更新某个依赖的版本,并自动更新package.json和yarn.lock文件

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

删除依赖

命令yarn remove [package]

删除某个依赖,并自动更新package.json和yarn.lock文件

安装依赖

命令 yarn install ,详细介绍

会从package.json里提取所有的依赖并安装,然后生成yarn.lock锁定所有的依赖版本,别人执行yarn install时会根据yarn.lock安装依赖,保证不同的电脑安装的依赖目录结构完全一致。

可选参数

yarn install --flat 有且仅有一个依赖的版本被允许,多依赖会出现一个交互式窗口,让使用者选择某一个版本安装

yarn install --force 强制重新下载所有的依赖包

yarn install --production 只下载dependencies下的依赖

全局命令

在yarn命令前加一个global修饰,可以将命令变为全局的,支持的命令有 add,bin,ls,remove,upgrade

例如npm install gulp -g ,可以用yarn global add gulp来替代

个人使用心得

更换安装源,使用阿里提供的npm register加速, yarn config set registry 'https://registry.npm.taobao.org',当然如果npm已经配置过,yarn就无需再配置了。

yarn还有许多小问题,不过官方也在努力修复中,建议时不时使用yarn self-update来更新版本

以前包锁定是使用npm shrinkwrap命令,感觉繁琐且难维护,使用yarn后自动生成锁定文件,简单方便

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 #Javascript
vue.js绑定class和style样式(6)
Dec 09 #Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 #Javascript
JS定时器实现数值从0到10来回变化
Dec 09 #Javascript
原生js实现查询天气小应用
Dec 09 #Javascript
JS实现太极旋转思路分析
Dec 09 #Javascript
学习使用bootstrap的modal和carousel
Dec 09 #Javascript
You might like
php 数组的指针操作实现代码
2011/02/08 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
Python读取Excel的方法实例分析
2015/07/11 Python
Python复制文件操作实例详解
2015/11/10 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
什么时候用assert
2015/05/08 面试题
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server
Pandas-DataFrame知识点汇总
2022/03/16 Python
Pillow图像处理库安装及使用
2022/04/12 Python
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL