前端工程化代码一般通过 包(package)
(或者称为 模块(module)
) 的方式来共享,因此你可以通过它使用全世界开发者的代码,或者分享自己的代码。开发者通常运用包管理工具来安装项目所需的依赖,因此出现许多包管理工具,比如:npm
、yarn
、bower
等。
本文将带大家初步了解yarn
和npm
。
什么是 Npm,Yarn
1.npm 简介
npm
即:npm package manager ,是一种重用其他开发人员的代码的方法,也是一种与他人共享代码的方式,并且可以很容易地管理不同版本的代码。npm
开始作为 Node 包管理器,所以你会发现很多模块可以在服务器端使用。也有很多的包添加命令供您在命令行中使用。你还会发现可以在前端使用的软件包。
npm
由三个不同的部分组成:网站,注册表和 CLI 。该网站是用户发现软件包的主要工具,注册表是一个关于软件包信息的大型数据库,而 CLI 则是开发者如何在注册表上发布他们的软件包或下载他们希望安装的软件包。更多详细内容,可参见 what-is-npm。
2.yarn 简介
yarn
对你的代码来说是一个包管理器, 你可以通过它使用全世界开发者的代码,或者分享自己的代码。 yarn
做这些快捷、安全、可靠,所以你不用担心什么。通过 yarn
,你可以使用其他开发者针对不同问题的解决方案,使自己的开发过程更简单。 使用过程中遇到问题,你可以将其上报或者贡献解决方案。一旦问题被修复,Yarn会更新保持同步。
yarn
是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。它并没有试图完全取代 npm
。yarn
同样是一个从 npm
注册源获取模块的新的 CLI 客户端。注册的方式不会有任何变化 —— 你同样可以正常获取与发布包。它存在的目的是解决团队在使用 npm
面临的少数问题。当然,在 Node 版本断更替中,npm
本身也在积极更新
关于安装/更新
1.npm 安装/更新
- 安装
npm
开始作为 Node 包管理器,所以它的安装是跟 Node.js 捆绑在一起的。至于如何安装 Node.js, Npm 官方,在 Installing Node.js and updating npm 做了阐述。之前在不同平台尝试更新 Node.js 之时,也是遇到过各种问题,有在 NodeJs 升级/安装折腾记 一文做了记载;折腾许久,得出的结论跟官网一致:
如果您使用的是OS X或Windows,安装Node.js的最佳方法是:使用 Node.js下载页面中的一个安装程序。
- 更新
- npm install npm@latest -g (npm install npm -g)
- 更新(重新下载) Node.js
2.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
,可以结合安装时候对应命令;如果是 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 <package> | yarn info <package> | 显示一个包的信息 |
对于以上还须对于,还须做如下补充性说明:
在 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速度慢的问题
Npm 独有的命令
-
npm rebuild pacakgename: 用于更改包内容后进行重建;比如常见的
npm rebuild node-sass
;当使用 Sass(Scss) 来作样式表预处理器,再打包的时候,你可能会遇见如下错误;而解决此问题,最为简单的方式即使用rebuild
命令,对 node-sass 进行重建即可。
<span style="color: red">Module build failed: ModuleBuildError: Module build failed: Error: Node Sass does not yet support your current environment:
This usually happens because your environment has changed since running npm install. Run npm rebuild node-sass to build the binding for your current environment.</span>
Yarn 独有的命令
-
yarn import:依据原npm安装后的
node_modules
目录生成一份yarn.lock
文件; - yarn licenses:列出已安装包的许可证信息;
- yarn pack:创建一个压缩的包依赖 gzip 档案;
- yarn why:显示有关一个包为何被安装的信息。
- yarn autoclean:从包依赖里清除并移除不需要的文件。
关于 package-lock.json 和 yarn.lock
关于 yarn.lock
有时候一个项目周期很长,在不断开发的同时,而依赖的库也会有很大改变;有时候你可能只想运行 npm i
更新没有下载的插件,却不想偶尔会将依赖的一些其他插件更到最新,导致各种奇葩问题;package-lock.json
和 yarn.lock
就是为解决这种问题而设定的存在。
使用 npm
或者 yarn
,都会有 pacakge.json
这个文件,用以标出自己项目对 各库包的依赖。举个例子来说,你的项目中有如下依赖:
"dependencies": {
"jade-package": "^2.3.4"
}
这其中的 ^ 是定义了向后(新)兼容依赖;在 npm<5.0
以前,如果 jade-package 的版本超过2.3.4,并在大版本号(2)上相同,就允许下载最新版本的 jade-package 库包,例如实际上可能运行npm i
时候,下载的具体版本可能是2.5.8。
多数情况下,这种向后兼容依赖下载最新库包,是没有问题的;然而,因为 npm
是开源世界,各库包的版本语义可能并不相同,不是所有开发者都能严格遵守这一原则:相同大版本号的同一个库包,其接口符合兼容要求。而且,不同的库包之间也存在其他依赖。理想状态下使用语义化版本发布补丁不会包含大的变化,但不幸的是这必非真理。npm 的这种策略,有可能导致两台拥有相同 package.json
文件的机子,实际上安装了不同版本的包,这可能导致一些错误。有时候,相同机器稍不留神的一个 npm i
,就可能导致 node_modules 中安装的实际依赖被更新,也就可能导致项目运行呈现,被面目全非。
yarn.lock
就是为解决此问题而衍生的存在;为了跨机器安装得到一致的结果,Yarn 需要比你配置在 package.json 中的依赖列表更多的信息。 Yarn 需要准确存储每个安装的依赖是哪个版本;它类似于 npm 的 npm-shrinkwrap.json,并且无副作用。只是需要注意的是:
yarn.lock
文件是自动产生的,而且应该完全被Yarn
管理。 当你用 Yarn CLI 增加/升级/删除依赖,它将自动更新你的yarn.lock
文件。 不要直接编辑这个文件,那样很容易弄坏某些东西。
关于 package-lock.json
当 Node.js
升级之 v8.0 以后,自带的 npm 也升级到了5.0;带来速度上很大提升之外,也带来了其他很大变大;这其中就包括 package-lock.json
:安装模块操作(改变 node_modules 文件夹内容)会生成或更新 package-lock.json 文件;package-lock.json
之于 npm,即是yarn.lcok
之于 yarn 的翻版;更多信息可参见 npm package-lock.json。
另外,值得一提的是,在 Github 上有人专门提供了 Synp 工具,用以:将yarn.lock转换为package-lock.json,反之亦然(Convert yarn.lock to package-lock.json and vice versa)。
对比 npm,yarn 的优点
- 速度快 。速度快主要来自以下两个方面:
- 并行安装:无论
npm
还是yarn
在执行包的安装时,都会执行一系列任务。npm
是按照队列执行每个package
,也就是说必须要等到当前package
安装完成之后,才能继续后面的安装。而yarn
是同步执行所有任务,提高了性能。 - 离线模式:如果之前已经安装过一个软件包,用
yarn
再次安装时之间从缓存中获取,就不用像npm
那样再从网络下载了。
安装版本统一:为了防止拉取到不同的版本,
yarn
有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块,yarn
就会创建(或更新)yarn.lock 这个文件。这么做就保证了,每一次拉取同一个项目依赖时,使用的都是一样的模块版本。更简洁的输出:
npm
的输出信息比较冗长。在执行 npm install <package> 的时候,命令行里会不断地打印出所有被安装上的依赖。相比之下,yarn
简洁太多:默认情况下,结合了emoji
直观且直接地打印出必要的信息,也提供了一些命令供开发者查询额外的安装信息。多注册来源处理:所有的依赖包,不管他被不同的库间接关联引用多少次,安装这个包时,只会从一个注册来源去装,要么是
npm
要么是bower
, 防止出现混乱不一致。更好的语义化:
yarn
改变了一些npm
命令的名称,比如 yarn add/remove,感觉上比 npm 原本的 install/uninstall 要更清晰。
小结
对比后发现,似乎yarn在各方面全面领先于npm。事实上,在npm5之前,yarn的优势特别明显。但是在npm5改进之后,二者差距不大, npm5值得尝试!
综上个人的建议:如果你已经在个人项目上使用 yarn,并且没有遇到更多问题,目前完全可以继续使用。但如果有兼容 npm 的场景,或者身处在使用 npm,cnpm 的团队,以及还没有切到 yarn 的项目,那现在就可以试一试 npm5 了。
友情链接:使用淘宝镜像提高安装速度
更多文章:猜你感兴趣
原文出处:Npm vs Yarn 之备忘详单