有则笑话,如此讲到:“老丈人爱吃核桃,昨天买了二斤陪妻子送去,老丈人年轻时练过武,用手一拍核桃就碎了,笑着对我说:你还用锤子,你看我用手就成。我嘴一抽,来了句:人和动物最大的区别就是人会使用工具。……”。撇开这样特例场景,这句话还是非常用有道理的;毕竟从远古石器时期或更早,到如今,所言之语,所穿之衣,代步之车,所学的知识,所晓的常识.....皆是工具;可以说绝大部分人之间的差异(天才级除外),仅在于工具使用之优劣罢了。在工具的使用中,很多人极大程度上停留于会用层面,如若不遇到问题,几乎就处于停滞;这本身倒也没有问题,但可能因为没有透彻的了解,而错失了对该物可以拥有的想象力,从而错过了许多本该有的美好,如此的可惜。

坦白说,在从事前端方面工作,蛮长一段时间内,就因缺乏对 Npm 有足够的认知,使得后来对其诸多讯息,颇感「相见恨晚」;在本篇中,将客观陈述 Npm 与 Yarn 的各自功用,以此显出两者间的差异;同时,以比较的形式,列出「常用命令清单」,以方便使用之时,作为参考(将陆续更新以完善);同时也欲借此,再次倡导那经典名言:「工欲善其事,必先利其器」,与诸君共勉。

原文出处:晚晴幽草轩

原文首链:Npm vs Yarn 之备忘详单

什么是 Npm,Yarn

什么是 npm?

npm 即:npm package manager,是一种重用其他开发人员的代码的方法,也是一种与他人共享代码的方式,并且可以很容易地管理不同版本的代码。npm 开始作为 Node 包管理器,所以你会发现很多模块可以在服务器端使用。也有很多的包添加命令供您在命令行中使用。你还会发现可以在前端使用的软件包。

npm 由三个不同的部分组成:网站,注册表和 CLI 。该网站是用户发现软件包的主要工具,注册表是一个关于软件包信息的大型数据库,而 CLI 则是开发者如何在注册表上发布他们的软件包或下载他们希望安装的软件包。更多详细内容,可参见 what-is-npm

什么是 yarn?

Yarn 对你的代码来说是一个包管理器, 你可以通过它使用全世界开发者的代码,或者分享自己的代码。 Yarn 做这些快捷、安全、可靠,所以你不用担心什么。通过 Yarn,你可以使用其他开发者针对不同问题的解决方案,使自己的开发过程更简单。 使用过程中遇到问题,你可以将其上报或者贡献解决方案。一旦问题被修复,Yarn会更新保持同步。

Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。它并没有试图完全取代 npm。Yarn 同样是一个从 npm 注册源获取模块的新的 CLI 客户端。注册的方式不会有任何变化 —— 你同样可以正常获取与发布包。它存在的目的是解决团队在使用 npm 面临的少数问题。当然,在 Node 版本断更替中,Npm 本身也在积极更新。

关于安装/更新

如何安装/更新 Npm

如何安装 Npm

npm 开始作为 Node 包管理器,所以它的安装是跟 Node.js 捆绑在一起的。至于如何安装 Node.js, Npm 官方,在 Installing Node.js and updating npm 做了阐述。之前在不同平台尝试更新 Node.js 之时,也是遇到过各种问题,有在 NodeJs 升级/安装折腾记 一文做了记载;折腾许久,得出的结论跟官网一致:

如果您使用的是OS X或Windows,安装Node.js的最佳方法是:使用 Node.js下载页面中的一个安装程序。(笔者微注:如是我中国大陆用户,去淘宝 Node.js 镜像下载,会是快速的法子)。

如何更新 Npm

  1. npm install npm@latest -g (npm install npm -g)
  2. 更新(重新下载) Node.js

如何安装 Yarn

对于如何安装 Yarn,Yarn 官方给出了很全面的说明,详见 Install Yarn;涵盖 MacOs,Windows,Linux 等平台,并且还给出一些备用安装方式,譬如通过 npm 来安装:

npm install --global yarn

当然,Yarn 官方在 Yarn 备选安装方式有明确讲道:

一般来说, 不推荐通过 npm 安装 Yarn,在用基于 Node 的包管理器安装 Yarn 时,该包未被签名, 并且只通过基本的 SHA1 散列进行唯一完整性检查。这在安装系统级应用时有安全风险。因为这些原因,高度推荐用你的操作系统最适合的方式来安装 Yarn。

但在实际使用中,这倒是最为方便的方式之一,迄今倒也没遇到什么问题;当然,最好按照官方推荐的方式;如果你使用并熟悉 Mac 操作系统,用推荐方式安装 Yarn 也是很简单:brew install yarn(笔者注)。

如何更新 Yarn

对于如何更新 Yarn,可以结合安装时候对应命令;如果是 Mac 操作系统,使用 brew 安装,那么如此操作予以更新:

brew upgrade yarn

如果 Yarn 通过 Debian / Ubuntu 包安装,则可以运行如下命令予以更新:

sudo apt-get update && sudo apt-get install yarn

也可以使用 yarn 本身来更新自己:

yarn global add yarn

如果有意了解更多如何更新 yarn 的方法,可参见:yarn self-update should update using the same installation method originally used

npm 与 yarn 常用命令对比

有所区别的命令

Npm Yarn 功能描述
npm install(npm i) yarn install(yarn) 根据 package.json 安装所有依赖
npm i --save [package] yarn add [package] 添加依赖包
npm i --save-dev [package] yarn add [package] --dev 添加依赖包至 devDependencies
npm i -g [package] yarn global add [package] 进行全局安装依赖包
npm update --save yarn upgrade [package] 升级依赖包
npm uninstall [package] yarn remove [package] 移除依赖包

相同操作的命令

Npm Yarn 功能描述
npm run yarn run 运行 package.json 中预定义的脚本
npm config list yarn config list 查看配置信息
npm config set registry 仓库地址 yarn config set registry 仓库地址 更换仓库地址
npm init yarn init 互动式创建/更新 package.json 文件
npm list yarn list 查看当前目录下已安装的node包
npm login yarn login 保存你的用户名、邮箱
npm logout yarn logout 删除你的用户名、邮箱
npm outdated yarn outdated 检查过时的依赖包
npm link yarn link 开发时链接依赖包,以便在其他项目中使用
npm unlink yarn unlink 取消链接依赖包
npm publish yarn publish 将包发布到 npm
npm test yarn test 测试 = yarn run test
npm bin yarn bin 显示 bin 文件所在的安装目录
yarn info yarn info 显示一个包的信息

对于以上还须对于,还须做如下补充性说明:

  • 在 npm 中,可以使用 npm config set save true 设置 —-save 为默认行为,但这对多数开发者而言,并非显而易见的。而使用 yarn,在package.json 中添加(add)和移除(remove)等行为是默认的。

  • 对于要添加或升级的包,npm 与 yarn 都可以指定具体的版本,或者 Tag;如:

    yarn add [package]@[version]

    yarn add [package]@[tag]

  • 在国内,使用 npm,最好还是替换成淘宝的镜像,如此网络影响减小到最低,这样安装依赖包的速度,可以得到蛮大的改善:

    npm config set registry http://registry.npm.taobao.org

    yarn config set registry http://registry.npm.taobao.org

    当然也可以设置别名 cnpm

    alias cnpm="npm --registry=http://registry.cnpmjs.org --cache=$HOME/.npm/.cache/cnpm"

Yarn 独有的命令

  • yarn import:依据原npm安装后的node_modules目录生成一份yarn.lock文件;
  • yarn licenses:列出已安装包的许可证信息;
  • yarn pack:创建一个压缩的包依赖 gzip 档案;
  • yarn why:显示有关一个包为何被安装的信息。
  • yarn autoclean:从包依赖里清除并移除不需要的文件。
  • ......

npm 使用之额外技巧

如何寻找适宜的 npm 包

找到合适的软件包可能相当具有挑战性 ——,毕竟有成千上万个模块供你选择。https://npms.io/ ,这个网站的存在,让这项任务轻松很多;它显示了质量受欢迎程度维护等指标。这些计算是基于模块是否具有过时的依赖关系,是否配置了linters,是否包含测试或是否进行了最近的提交。

执行 npm 包的二进制文件

显而易见,经由 npm 或是 yarn 安装,并被放置在 ./node_modules 目录中的包,其二进制可执行文件可访问 ./node_modules/.bin,那么该如何从项目根目录中调用它呢?以下提供了几种方式,你可以从中任意选择一种,来达到你的目的:

为了方便举例,这里以运行 responsive-email-template(制作更好的响应式邮件模板)作为示例来作说明;其中有用到 mjml 这个库;此库被推荐的方式是在本地安装和使用;所以,要运行对应命令,你可以操作她,使用以下办法:

  • 古老而原始的办法

在你安装 MJML 的文件夹中,你现在可以运行:

./node_modules/.bin/mjml --watch src/index.mjml -o dist/index.html
  • ./node_modules/.bin/ 添加至环境变量
export PATH="$PATH:./node_modules/.bin"
mjml --watch src/index.mjml -o dist/index.html
  • 或者使用快捷键 npm bin
$(npm bin)/mjml --watch src/index.mjml -o dist/index.html
  • 或者利用 npm 脚本命令
// 将命令配置在 package.json 文件,使用 scripts 字段定义脚本命令
"scripts": {
"mjml": "mjml --watch src/index.mjml -o dist/index.html"
} // 使用之时,只需运行如下命令即可:
npm run mjml
  • 或者通过使用 npx

注意:npx 包含在 npm > v5.2,或可以分开安装。

# npm install -g npx
npx mjml --watch src/index.mjml -o dist/index.html

强大如斯,npm 脚本

npm(Yarn 亦同)允许在 package.json 文件里面,使用 scripts 字段定义脚本命令。它支持通配符、变量、钩子、外部传参、支持并发 & 异步执行等等;所以,完全可以借助 npm script,打造属于自己的高效工作流。鉴于篇幅,这部分就不在这里多做赘述,具体使用以及运行原理等,可以参见 @阮一峰 所写的文章:npm scripts 使用指南

具体例子来说,有些时候会有需求要删除 Git 仓库所有提交历史,而保留代码为当前状态;而删除 .git 文件夹可能会导致您的 git 存储库中的问题;所以可以使用另一种更为安全的办法:详见[如何删除 Git 仓库所有提交历史记录](https://jeffjade.com/2014/12/22/2014-12-22-gitmemo/如何删除 Git 仓库所有提交历史记录)。但这个操作一套打下来,不免劳神费力。那么借助 npm script,运行如下命令,一键搞定(当然命令可自行定义);如果你有需求执行更多,也可以在后面追加更多操作。

"scripts": {
"clean-commit": "git checkout --orphan latest_branch && git add -A && git commit -am 'clean past commit history

Npm vs Yarn 之备忘大全的更多相关文章

  1. HTML5终极备忘大全

    二.文字备忘之标签 HTML5中新增的标签 <article> 定义文章 <aside> 定义页面内容旁边的内容 <audio> 定义声音内容 <canvas ...

  2. [转] HTML5终极备忘大全(图片版+文字版)---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1544 一.前言兼图片 ...

  3. GIS部分理论知识备忘随笔

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.高斯克吕格投影带换算 某坐标的经度为112度,其投影的6度带和3度带 ...

  4. python序列,字典备忘

    初识python备忘: 序列:列表,字符串,元组len(d),d[id],del d[id],data in d函数:cmp(x,y),len(seq),list(seq)根据字符串创建列表,max( ...

  5. Vi命令备忘

    备忘 Ctrl+u:向文件首翻半屏: Ctrl+d:向文件尾翻半屏: Ctrl+f:向文件尾翻一屏: Ctrl+b:向文件首翻一屏: Esc:从编辑模式切换到命令模式: ZZ:命令模式下保存当前文件所 ...

  6. ExtJs4常用配置方法备忘

    viewport布局常用属性 new Ext.Viewport({ layout: "border", renderTo: Ext.getBody(), defaults: { b ...

  7. [备忘] Automatically reset Windows Update components

    这两天遇到Windows 10的更新问题,官方有一个小工具,可以用来修复Windows Update的问题,备忘如下 https://support.microsoft.com/en-us/kb/97 ...

  8. ECMAScript 5(ES5)中bind方法简介备忘

    一直以来对和this有关的东西模糊不清,譬如call.apply等等.这次看到一个和bind有关的笔试题,故记此文以备忘. bind和call以及apply一样,都是可以改变上下文的this指向的.不 ...

  9. MFC通过txt查找文件并进行复制-备忘

    MFC基于对话框的Demo txt中每行一个23位的卡号. 文件夹中包含以卡号命名的图像文件.(fpt或者bmp文件) 要求遍历文件夹,找到txt中卡号所对应的图像文件,并复制出来. VC6.0写的. ...

随机推荐

  1. Geode集群搭建

    Geode集群搭建 1.下载安装包 http://mirror.bit.edu.cn/apache/geode/1.2.0/ 2.安装解压后即可直接使用 apache-geode-1.2.0 3.进入 ...

  2. sudo 做不到的事

    本文是经验帖,以后遇到类似的情况会持续更新到这篇文章 普通用户使用sudo会遇到以下情况 1.字符流无法写入到 /var/log/messages /var/log/secure (实际上这些文件一旦 ...

  3. django xdmin使用

    我们来看看我们原先django给我们自带的admin后台是什么样子的呢 有人说,你的界面怎么那么丑,我说这个还叫丑吗,他说丑,我说你来,我看看你的,上图 看到登录界面后,我说别看了,我去修改,修改,我 ...

  4. spring的基本使用

    Spring的基本使用ioc,今天主要给大家说明了解决强耦合的联系,并且,注入的基本使用 Java里面的强耦合并且讲了spring是如何解决强耦合的第一种方式使用工厂模式,用的是反射,第二种方式是sp ...

  5. 【转2】Appium 1.6.3 在Xcode 8 (真机)测试环境搭建 经验总结

    Appium 1.6.3 在Xcode 8 (真机)测试环境搭建经验总结 关于 Appium 1.6.3 在Xcode 8, 1真机上环境搭建问题更多,写此文章,供大家参考,让大家少走弯路. 在开始i ...

  6. python1数据链接总结

    本节内容 列表.元组操作 字符串操作 字典操作 集合操作 文件操作 字符编码与转码 1. 列表.元组操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 定义列表 ...

  7. hexo next主题为博客添加分享功能

    title: hexo next主题为博客添加分享功能 date: 2018-01-06 20:20:02 tags: [hexo博客, 博客配置] categories: hexo next主题配置 ...

  8. Chris Richardson微服务翻译:微服务部署

    Chris Richardson 微服务系列翻译全7篇链接: 微服务介绍 构建微服务之使用API网关 构建微服务之微服务架构的进程通讯 微服务架构中的服务发现 微服务之事件驱动的数据管理 微服务部署( ...

  9. Linux架构浅谈

    以下图为基础: 最内层是硬件,最外层是用户常用的应用,比如说firefox浏览器,evolution查看邮件,一个计算流体模型等等.硬件是物质基础,而应用提供服务.但在两者之间,还要经过一番周折. 还 ...

  10. PostgreSQL查询优化器之grouping_planner

    grouping_planner主要做了3个工作: 对集合进行处理 对非SPJ函数进行优化 对SQL查询语句进行物理优化 grouping_planner实现代码如下: static void gro ...