Intro to Yarn Package Manager

What’s going on everyone, this is another
Chris Course with your host Chris, and in this video we’re going to cover the package
manager developed and used by Facebook in production: yarn. In collaboration with Google, Exponent, and
Tilde, Facebook has created a package manager that provides a number of benefits over its
npm counterpart, including: the auto-generation of lock files, quicker package downloads,
the ability to download packages offline, and emojis. In this video I’m going to show you how
to get up and running with yarn, while helping you understand why you’d want to use it
over existing package managers such as npm. So let’s begin. Alright, to install Yarn, the first thing
we’re going to do is open up our terminal… And from here, installation is simple, we’re
going to run `npm install yarn –global`, which will install our package globally so
we can run yarn from any directory we’d like. Cool, so simple enough right? We have yarn downloaded and we can use it
to download any package from registries such as npm and bower. Let’s see it in action so we can better
understand some of the benefits it provides. Create and cd into a project directory… Now normally, to install a package we would
use something like `npm install` and then the package name, but with yarn, the syntax
is a little different. To install a package with yarn, we’re going
to type yarn.. add.. and then the name of the package we’d like to install. I’m going to use express… Now before we run this, I’m going to open
up a second terminal window… create and cd into a new project directory… and set
up the npm equivalent of our yarn script so we can compare the two side by side. And before I actually run this, I’m going
to add a time command to the beginning of each of these so we can see how long each
process takes to actually finish. So if we run this on our left, npm terminal… You’ll see that npm installed our package
and left us a message in regards to how long it took to do so. And if we run our right, yarn terminal…
you’ll see that yarn installed our package a bit quicker than npm did. Now, when yarn installs a package, it stores
all of its dependencies in what’s known as a global cache. Essentially, this is a directory on our computer
that stores any packages we’ve downloaded, so that we don’t have to travel across the
internet when we want to download them again. And the cool thing about this is, if I already
have a lock file in place, which we’ll go over later, and I’ve already downloaded
the packages listed within this file at least once, our download times are going to be super
quick. Not to mention, we’ll be able to download
these packages offline. Let me show you. If I remove our node_modules folder… disconnect
from the internet… and run `yarn add express` again. Just like that, yarn has cut a significant
amount of time off of our install. So as you can see, there are some serious
speed benefits here, which will save you minutes, if not hours and days worth of time in the
long run. Now if we list out our files… You’ll see that yarn has generated what’s
known as a lock file. Now what is this and why do we need it? A lock file is a list, that contains all of
the dependencies required for your project to function. This file basically “locks down” your
dependency versions so that whenever someone else runs `yarn install`, they’ll receive
all of the exact dependencies listed out here, ensuring that your team has the exact same
packages as you do, while preventing bugs that can appear due to the introduction of
new, untested packages. So if we head on over to our npm terminal…
you’ll notice that we don’t have a lock file, all we have is a package.json file and
our node modules. Now, this package.json file includes details
in regards to what dependencies our project requires, but it’s not comprehensive, we
have no list of the exact dependencies that something like express depends upon in order
to function. Yarn may list all of these dependencies for
us automatically, but to do so with npm, we need to run an `npm shrinkwrap` command… With this in place, any developer can run
npm install, and they’ll prompt npm to automatically download the exact packages listed within
this shrink wrap file. And since we’re downloading exact packages,
we don’t have to worry about bugs due to the introduction of new or updated packages. So npm provides lock file functionality, but
since humans are forgetful and may forget to run the npm shrinkwrap command, not to
mention that this is something that can and should be automated, it results in npm being
a second best alternative to something like yarn. So a few more cool things about yarn. If you look on over at our yarn terminal,
you’ll notice that I never typed –save when we installed our express package. And that’s because yarn adds any installed
packages to our package.json file automatically. Same thing goes for uninstalling packages. If we uninstall a package with npm… you’ll
notice that our package.json file didn’t get updated automatically. If we wanted to update our package.json file,
we’d have to run `npm uninstall express –save`… And you’ll notice that we error out, and
that’s because we just uninstalled express, npm is looking for a package to uninstall,
but it can’t find one at the moment. So we have to reinstall express as a result… Then with express reinstalled, we can run
`npm uninstall express –save` in order for all of this to work as expected. And if we check in on our package.json file
now. You’ll see that express has indeed been
removed. With yarn, updating our package.json file
when removing a package is easy. Simply type yarn.. remove.. and then the package
you’d like to uninstall… and you’ll see if we visit our yarn package.json file
it’s been completely updated automatically for us. Now let’s say we want to save something
as a devDependency. Rather than use `npm install the package name
–save-dev`, we’d use `yarn add the package name –dev`. So you see, yarn provides not only speed and
consistency, but also provides for a succinct interface by replacing long command line statements
with short ones, if not automating the process altogether. If you ever need to know “why” a particular
package or dependency was installed, or why it exists on your project, simply type, yarn..
why.. and then the package name… and yarn will detail out the exact reasoning as to
why that package was installed, and what packages depend upon it. So really really cool features here from yarn,
something you may not expect out of a package manager. So that’s all for this one folks, I hope
you enjoyed and got some useful information out of this. If you found this video useful or helpful
in any sort of way and would like to see more development tutorials in the future, then
subscribe and keep an eye out for new videos throughout the week, I try to release at least
one every two to four days. Otherwise, I hope you all have a fantastic
day and look forward to seeing you all in the next video, later.

24 thoughts on “Intro to Yarn Package Manager

Leave a Reply

Your email address will not be published. Required fields are marked *