Npm vs Yarn 之备忘大全

时间：2022-06-28 09:53:08

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

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

原文出处：晚晴幽草轩

原文首链：Npm vs 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

相关文章