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

这篇文章会通过以下几个方面介绍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。

现在目录依赖结构如下

这时假设我们在项目里使用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

正确的安装姿势

注意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后自动生成锁定文件,简单方便

总结

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

(0)

相关推荐

  • yarn与npm的命令行小结

    一.首先需要了解的命令 npm install === yarn -- install 安装是默认行为. npm install taco --save === yarn add taco -- taco 包立即被保存到 package.json 中. npm uninstall taco --save === yarn remove taco 在 npm 中,可以使用 npm config set save true 设置 - -save 为默认行为,但这对多数开发者而言并非显而易见的.在 y

  • Node.js中npm常用命令大全

    npm是什么 NPM的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具,它很方便让JavaScript开发者下载.安装.上传以及管理已经安装的包. npm install 安装模块 基础语法 npm install (with no args, in package dir) npm install [<@scope>/]<name> npm install [<@scope>/]<name>@<tag>

  • 利用yarn代替npm管理前端项目模块依赖的方法详解

    本文主要给大家介绍了关于yarn代替npm管理前端项目模块依赖的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 什么是 yarn? 简单来说,yarn 是一个与 npm 功能相同的工具,用于前端项目的依赖管理.在使用 npm 的项目中,使用 npm 命令的地方都可以使用 yran 来代替. 为什么要使用 yarn 替代 npm 呢?yarn 相对 npm 来说,主要的特点有: 离线.并行安装:依赖并行安装,缓存已下载过的依赖并优先使用,各种优化使得安装依赖速度显著提升

  • 你应该知道的几类npm依赖包管理详解

    前言 大家都知道在一个Node.js项目中,package.json几乎是一个必须的文件,它的主要作用就是管理项目中所使用到的外部依赖包,同时它也是npm命令的入口文件.下面话不多说了,来一起看看详细的介绍把. npm 目前支持以下几类依赖包管理: dependencies devDependencies peerDependencies optionalDependencies bundledDependencies / bundleDependencies 如果你想使用哪种依赖管理,那么你可

  • nodejs npm包管理的配置方法及常用命令介绍

    1. 输入 npm config ls -l 可以查看当前的目录设置 复制代码 代码如下: ; cli configslong = true ; builtin config C:\Program Files (x86)\nodejs\node_modules\npm\npmrcprefix = "C:\\Users\\sam\\AppData\\Roaming\\npm" ; default valuesalways-auth = falsebrowser = "start

  • 卸载安装Node.js与npm过程详解

    下面记录一下在本地 Windwos 环境用 vagrant 搭建的虚拟机(Homestaead)和生产环境阿里云 CentOS 系统安装 Node.js 的步骤,以及 npm 安装依赖的不同之处. 使用源码编译的方式安装 node.js.首先将机子上的 Node.js 卸载,我直接贴上 Stack Overflow 上提供的步骤: 1.卸载 npm 和 Node.js 先卸载 npm,命令是:sudo npm uninstall npm -g,然后卸载 Node.js. Running whic

  • Nodejs中 npm常用命令详解

    npm是什么 NPM的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具,它很方便让JavaScript开发者下载.安装.上传以及管理已经安装的包. npm是一个node包管理和分发工具,已经成为了非官方的发布node模块(包)的标准.有了npm,可以很快的找到特定服务要使用的包,进行下载.安装以及管理已经安装的包. 1.npm install moduleNames:安装Node模块 安装完毕后会产生一个node_modules目录,其目录下就是安装的

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

    这篇文章会通过以下几个方面介绍yarn的: yarn对比npm解决了什么问题,带来哪些便利. 获取yarn的正确姿势 yarn的使用入门(介绍一些常用的命令 个人使用心得 yarn对比npm的优点 根据官方文档yarn具有6大优点 1.离线模式 yarn会有一个缓存目录,会缓存以前安装过的软件包,再次安装时就不必从网络下载了,大大加速安装速度. 这一点很重要,npm 饱受诟病的一点就是,每次安装依赖,都需要从网络下载一大堆东西,而且是全部重新下载,工程多的时候比较烦人. 我司部署node项目,是

  • node.js包管理工具Yarn使用简介

    Yarn是由Facebook.Google.Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 , 它主要是为了弥补 npm 的一些缺陷而出现的.和npm相比,它具有如下特点: 速度快 : 主要来自以下两个方面: 并行安装:并行执行所有任务,提高了性能. 离线模式:如果之前已经安装过一个软件包,再次安装时直接从缓存中获取. 安装版本统一:每一次拉取同一个项目依赖时,使用的都是一样的模块版本. 更简洁的输出: Yarn结合了 emoji直观且直接地打印出必要的信息,也提供了一些

  • 一文带你了解前端包管理工具npm、yarn和pnpm

    目录 为什么需要包管理工具? 版本管理规范 前端主流包管理工具 yarn vs npm vs pnpm 包管理工具安装和版本切换 安装项目依赖 npm .yarn 和 pnpm 常用命令 安全性 lock 文件 性能对比 pnpm 的优势 总结 为什么需要包管理工具? 每种主流编程语言都有包管理工具,比如 java 的 Maven.Gradle,Python 的 pip,nodejs 的 npm.yarn.pnpm 等. 包管理工具的主要作用是管理第三方依赖,也可以看成一个"轮子"工厂

  • node.js中npm包管理工具用法分析

    本文实例讲述了node.js中npm包管理工具用法.分享给大家供大家参考,具体如下: 现在安装node.js,默认就会帮我们装上了npm包管理工具,npm主要用来下载,安装,管理第三方模块. 创建一个包描述文件: npm init [-y] 查看包的信息 npm info <package-name> 查看包的版本信息 npm info <package-name> versions 安装指定的包: npm install <package-name> 默认会安装在当前

  • Node.js包管理器Yarn的入门介绍与安装

    前言 这两天大家有没有都被Yarn悄悄刷了屏,最近Facebook 发布了新的 node.js 包管理器 Yarn 用以替代 npm .为了跟上 Javascript 这股潮 流的脚步,大概的浅尝了一下这个自称是又快又可信赖又安全的包管理,所以写的内容不会很详细,更多的可能只是针对这个全新的包管理与 npm 的不同之处来对比.也可能有些地方写得不对,如果有的话,欢迎指正. 一.安装 首先当然是安装啦.跟 npm 这种被钦点而随 nodejs 一起被安装的包管理器不同, Yarn 需要自行手动安装

  • 浅谈node模块与npm包管理工具

    在Node.js中,以模块为单位划分所有的功能,并且提供了一个完整的模块加载机制,所以我们可以将应用程序划分为各个不同的部分,并且对这些部分进行很好的协同管理.通过将各种可重用代码编写在各种模块中的方法,可以大大减少应用程序的代码量,提高应用程序的开发效率以及应用程序代码的可读性.通过模块加载机制,可以将各种第三方模块引入到我们的应用程序中. 在node.js中,提供npm包管理工具,用于从第三方网站上下载各种Node.js包. 一.模块 1.1 加载模块 在Node.js中,以模块为单位划分所

  • bower 强大的管理web包管理工具

    Bower介绍 bower官方地址:http://bower.io/ bower是twitter的又一个开源项目,使用nodejs开发,用于web包管理.如果越来越多得开源项目都托管在github上,bower只需要将github上项目加上一个配置文件既可以使用bower方式使用安装包.作为包管理,bower能提供添加新web包,更新web包,删除web包,发布web包功能,管理包依赖.web包通常认为由html+css+javascript构成. quick start: 解决实际问题 试想我

  • Web前端开发工具——bower依赖包管理工具

    Bower 是 twitter 推出的一款包管理工具,基于nodejs的模块化思想,把功能分散到各个模块中,让模块和模块之间存在联系,通过 Bower 来管理模块间的这种联系. 包管理工具一般有以下的功能: a)注册机制:每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配,所以包管理工具需要维护注册信息,可以依赖其他平台. b)文件存储:确定文件存放的位置,下载的时候可以找到,当然这个地址在网络上是可访问的. c)上传下载:这是工具的主要功能,能提高包使用的便利性.比如想用 jqu

  • 新一代Python包管理工具

    目录 1 简介 2 使用pdm管理项目库环境 2.1 pdm的安装 2.2 pdm的基础使用 1 简介 说起Python的包管理工具,大家第一时间想到的肯定是pip.conda等经典工具.但最近我发现了一款新颖的Python包管理工具——pdm,它受到PEP582以及node管理库文件方式的启发,帮助我们以「本地项目库」的形式创建及管理不同的Python环境. 2 使用pdm管理项目库环境 2.1 pdm的安装 pdm的安装方式多种多样,这里我们使用官方推荐的方式进行安装: python -m

  • Vue3新状态管理工具实例详解

    目录 前言 安装 创建Store State 定义State 获取state 修改state Getters Actions 异步action action间相互调用 数据持久化 安装 使用 自定义key 持久化部分state 最后 前言 Pinia.js 是新一代的状态管理器,由 Vue.js团队中成员所开发的,因此也被认为是下一代的 Vuex,即 Vuex5.x,在 Vue3.0 的项目中使用也是备受推崇. Pinia.js 有如下特点: 完整的 typescript 的支持: 足够轻量,压

随机推荐