Yarn is an open-source npm client that was developed at Facebook and improves on many aspects of the standard npm client. In this tutorial, I'll focus on the top six features that make Yarn awesome:
- Speed
- Robust Installs
- License Checks
- Compatibility with npm and Bower
- Multiple Registries
- Emojis
1. Speed
One of Yarn's claims to fame is its speed compared to the standard npm client. But how fast is it? In a recent benchmark, Yarn was two to three times faster than npm. The benchmark timed the installation of React, Angular 2, and Ember. This is a pretty good test for a package manager as each of these frameworks pulls a bunch of dependencies and represents a major share of the dependencies of a real-world web application.
Let's add another data point and check for ourselves by installing a create-react-app using both yarn and npm. Here is the installation using yarn:
$ yarn global add create-react-app --prefix /usr/local
yarn global v0.27.5
warning package.json: No license field
warning No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-react-app@1.4.0" with binaries:
- create-react-app
warning No license field
Done in 2.59s.
Here is the installation using npm:
$ npm install -g create-react-app
/usr/local/bin/create-react-app ->
/usr/local/lib/node_modules/create-react-app/index.js
+ create-react-app@1.4.0
added 80 packages in 9.422s
Yep. This definitely corroborates other reports about a significant speed advantage to yarn. Yarn installed in 2.59 seconds, while npm took 9.422 seconds. Yarn was 3.63X faster!
2. Robust Installs
Yarn also boasts more robust installs than npm. What makes an install flaky? If subsequent installs fail or produce a different outcome then an install is flaky. There are two main causes:
- Transient network issues might cause fetching packages from the registry to fail.
- New releases of packages might result in incompatible and breaking changes.
Yarn addresses both concerns.
Offline Cache
Yarn uses a global offline cache to store packages you've installed once, so new installations use the cached version and avoid flakiness due to intermittent network failures. You can find where your yarn cache is by typing:
$ yarn cache dir
/Users/gigi.sayfan/Library/Caches/Yarn/v1
Here are the first five packages in my offline cache:
$ ls `yarn cache dir` | head -5
npm-@kadira
npm-@types
npm-Base64-0.2.1-ba3a4230708e186705065e66babdd4c35cf60028
npm-JSONStream-0.8.4-91657dfe6ff857483066132b4618b62e8f4887bd
npm-abab-1.0.3-b81de5f7274ec4e756d797cd834f303642724e5d
Yarn can go even further and have a full offline mirror that will work across upgrades of the yarn itself.
The yarn.lock File
The yarn.lock file is updated whenever you add or upgrade a version. It essentially pins down the exact version of each package that may be specified in package.json using partial versioning (e.g. just major and minor) and its dependencies.
Here is the beginning of a typical yarn.lock file. You can see the version as specified in package.json like "abbrev@1" and the pinned version "1.1.0".
cat yarn.lock | head -18
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
abab@^1.0.3:
version "1.0.3"
resolved "http://ift.tt/2xq9xcu
/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d"
abbrev@1:
version "1.1.0"
resolved "http://ift.tt/2fKVBjd
/abbrev-1.1.0.tgz#d0554c2256636e2f56e7c2e5ad183f859428d81f"
accepts@~1.3.3:
version "1.3.4"
resolved "http://ift.tt/2xr9xZL
-/accepts-1.3.4.tgz#86246758c7dd6d21a6474ff084a4740ec05eb21f"
dependencies:
mime-types "~2.1.16"
negotiator "0.6.1"
But Why?
Yarn also gives you the yarn why command to explain why a particular package is installed in your project:
$ yarn why worker-farm
yarn why v0.27.5
[1/4] Why do we have the module "worker-farm"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
info This module exists because "react-scripts#jest#jest-cli"
depends on it.
info Disk size without dependencies: "132kB"
info Disk size with unique dependencies: "212kB"
info Disk size with transitive dependencies: "244kB"
info Number of shared dependencies: 2
Done in 1.38s.
3. License Checks
Some projects need to abide by certain licensing requirements or just produce a report for internal or external purposes. Yarn makes it really easy with the yarn licenses ls command. It produces a compact report that includes the fully qualified package name, its URL, and the license. Here is an example:
$ yarn licenses ls | head -20
yarn licenses v0.27.5
├─ abab@1.0.3
│ ├─ License: ISC
│ └─ URL: git+http://ift.tt/2fLMaAc
├─ abbrev@1.1.0
│ ├─ License: ISC
│ └─ URL: http://ift.tt/2xqVOC1
├─ accepts@1.3.4
│ ├─ License: MIT
│ └─ URL: http://ift.tt/2fLE9em
├─ acorn-dynamic-import@2.0.2
│ ├─ License: MIT
│ └─ URL: http://ift.tt/2xsfcPk
├─ acorn-globals@3.1.0
│ ├─ License: MIT
│ └─ URL: http://ift.tt/2fM6EZz
├─ acorn-jsx@3.0.1
│ ├─ License: MIT
│ └─ URL: http://ift.tt/1zX0fOk
Yarn can even generate a disclaimer for you with yarn licenses generate-disclaimer. The result is some text with a disclaimer message and text for each package in your application. Here is a sample from the disclaimer generated for my test project:
-----
The following software may be included in this product:
utils-merge. A copy of the source code may be downloaded from
git://github.com/jaredhanson/utils-merge.git. This software
contains the following license and notice below:
(The MIT License)
Copyright (c) 2013 Jared Hanson
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
-----
The following software may be included in this product: uuid.
A copy of the source code may be downloaded from
http://ift.tt/2xqnebm. This software
contains the following license and notice below:
Copyright (c) 2010-2012 Robert Kieffer
MIT License - http://ift.tt/SHXZm8
-----
4. Compatibility With npm and Bower
Yarn is fully compatible with npm as it is just a different client that works with npm registries. Very early it supported Bower, but then shortly after a decision was made to drop Bower support.
The main reason was that the Bower support didn't work very well and emptied the bower_components directory or didn't fetch any bower packages on a fresh project. But another reason is that the Yarn team didn't want to encourage fragmentation in the package management arena and instead preferred for everyone to switch to npm.
If you are invested in Bower and don't want to migrate right now, you can still use Yarn, but add the following snippet to your package.json file:
"scripts": {
"postinstall": "bower install"
}
5. Multiple Registries
Yarn can work with multiple registry types. By default, if you just add a package, it will use its npm registry (which is not the standard npm registry). But it can also add packages from files, remote tarballs, or remote git repositories.
To see the current configured npm registry:
$ yarn config get registry
http://ift.tt/2eBLKgI
To set a different registry type: yarn config set registry <registry url>
To add packages from different locations, use the following add commands:
# Configured npm registry
yarn add <pkg-name>
# Local package
yarn add file:/<path to local package directory
# Remote tarball
yarn add https://<path to compressed tarball>.tgz
# Remote git repo
yarn add <git remote-url>
6. Emojis FTW!
Some people like emojis, and some people don't. Yarn originally displayed emojis automatically, but only on Mac OS X. It caught fire from both camps: the emoji haters were upset that their console on Mac OS X was cluttered with emojis, and the emoji lovers were upset that they didn't have emojis on Windows and Linux.
Now, emojis are not displayed on macOS by default, and you can enable emojis with the --emoji flag:
$ yarn install --emoji
yarn install v0.27.5
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
Conclusion
Yarn is the best JavaScript package manager. It is compatible with npm, but much, much faster. It addresses serious problems for large-scale projects with flaky installation, it supports multiple types of registries, and it has emojis to boot.
JavaScript, though not without its learning curves, has plenty of libraries and frameworks to keep you busy, as you can see. If you’re looking for additional resources to study or to use in your work, check out what we have available in the Envato marketplace.
The JavaScript community is overall very positive, and there is a lot of momentum behind Yarn. It has already addressed some issues such as redundant Bower support and emojis by default. Migrating to Yarn from npm is very easy. I highly recommend that you give a try.
by Gigi Sayfan via Envato Tuts+ Code
