Introduction to Yarn — Javascript package manager by Facebook

Yarn is a new package manager developed by Facebook. It is not replacement but improvement over npm. Official website of yarn is www.yarnpkg.com

I have made a video on the same in case if you learn better from videos :)

Why & how to use yarn?

Benefits of yarn over npm -

  1. Dependencies installed using yarn will get installed much faster than installed using npm. I will demonstrate it by downloading bootstrap using both yarn & npm & will show you the difference in time taken by both to install bootstrap.
Bootstrap installed using yarn
Bootstrap installed using npm

Time taken by yarn to install bootstrap was about 2.23s & time taken by npm to install bootstrap was about 2.45 s.

Lets look into one more example. This time we will install gulp(It has about 200 dependencies) using both yarn & npm.

Gulp installed using yarn
Gulp installed using npm

Time taken by yarn to install gulp was about 15s & time taken by npm to install gulp was about 23s.

2. Offline mode

If you have installed a package before you can install it again without any internet connection.

3. Secure & Reliable

Yarn uses checksum to verify the integrity of installed packages.

4. Emoji’s

When you install any package it will show you bunch of emoji’s isn’t it cool :). But unfortunately this emoji’s are not available for windows user.

Note:

When yarn install a package it store all of its dependencies in a global cache which is a directory on our system. You can look in to that cache by using this command.
yarn cache ls

Because of this directory downloading package offline is possible.

How to install yarn?

For mac user you can either use homebrew or npm to install yarn.

Follow this link to see methods to Install yarn on different machines Install Yarn

I have used npm to install yarn.

npm install --global yarn

This will install yarn globally on your machine.

Getting started

The first step is to run this command in the terminal. Remember run this command in the root of your project directory.

yarn init
I have just press enter everytime without entering any value

It will ask for following questions one by one:

name (your-project):
version (1.0.0):
description:
entry point (index.js):
git repository:
author:
license (MIT):
If you don’t want to answer or don’t know what to do just press enter everytime & it will create package.json file with default values.

#Package.json

Your package.json is used to store info about your project. This includes the name of your project, the maintainers, where the source code lives, but most importantly what dependencies are needed to be installed for the project.

This file will look something like this in the beginning

#Yarn.lock

To ensure consistent install across different machines yarn need more information than dependencies you configure in package.json .

Yarn needs to store same version of dependencies that get installed. So all that information is stored in yarn.lock file. It look like below.

yarn.lock file

I have installed two packages so it is showing me info about that packages. It will change depends on the packages you have installed.

#Adding a dependency

To install any dependency you have to run this command in terminal

yarn add package-name
yarn add bootstrap

You can also specify which version of package you want

yarn add package-name@version-number

#Upgrading a dependency

You can upgrade a particular package to latest version or even to a particular version.

yarn upgrade package-name
yarn upgrade package-name@version-number

#Remove a dependency

Removing a package is easy just use the command below

yarn remove package-name

#Know the dependencies you have installed

Below command will give you list of dependencies you have installed in your project.

yarn ls

#Don’t remember commands

Below command will show all command & flags available to run with yarn

yarn --help

Command usage should be like

yarn [command] [flags]

#stuck somewhere

You can go to the official website

I think yarn is pretty simple & fast. Just start using it & you will se the difference. Happy coding :)