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 相关文章推荐
Jquery 获取checkbox的checked问题
Nov 16 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
PHP 函数执行效率的小比较
2010/10/17 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
js实现图片局部放大效果详解
2019/03/18 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
全面解读Python Web开发框架Django
2014/06/30 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
浅析python中的del用法
2020/09/02 Python
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
总裁秘书岗位职责
2013/12/04 职场文书
难忘的一课教学反思
2014/04/30 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android