Intro To Yarn – For Those Coming From NPM

Watch The Video Tutorial Here: https://www.youtube.com/watch?v=zx_qtYT60qA

He found the yarn

What is Yarn?

  • It’s a continuous strand of twisted threads of natural or synthetic fibers, such as wool or nylon, used in weaving or knitting. – Wordnik.

Yes, I knew that, but in the context of JS PLEASE!

Why? Just Why?

People get opinionated and want to make something better given they hate the way something works right now.

Yarn is an attempt to fix issues wrong with npm (e.g. security, speed, package conflicts, etc).

Often this kind of independent work leads to BETTER innovation as a whole for the industry. Such is life in the land of JavaScript. C’est la vie.

So Should I Drop npm?

For now you don’t really need to leave npm.

However, you’ll probably see the yarn command come up quite often especially if you use create-react-app command to make a React app.

Yarn is designed to be a drop in replacement for npm, and its goal is to do npm things better, faster without breaking your app. So no harm trying it out!

Yarn Install

Okay, so I convinced you to try yarn (maybe). But you need some commands — how do I use it for starters? And where do I get it from?

Make sure you have Node.js installed, then visit [https://classic.yarnpkg.com/en/docs/install] to get instructions for installation.

Mac Installation

Get Homebrew first and install it. Then from your terminal type:

brew install yarn

Linux

You can use sudo apt install yarn if you are on Debian/Ubuntu, and if you are on Fedora (equivalent), use yum install yarn.

There are more specific instructions here at: [https://classic.yarnpkg.com/en/docs/install]

Windows

You can install via an .msi installer available at: [https://classic.yarnpkg.com/latest.msi]

Getting Started

Check that you have yarn by typing out the following (after installation completes)

In your terminal or command prompt type:

yarn -v

You should get back a version number, something like 1.22.4 (that’s my version at time of typing).

Next, start a project of your own:

In your terminal or command prompt type:

mkdir myApp
cd myApp
touch index.html && echo "<html><head><title>My App</title></head><body><p>My App</p></body></html>" > index.html
yarn init

^ Feel free to customize these commands to your own liking the point is yarn init.

You’ll get the same typical questions if you were to do npm init prompted to you. To skip use flag, -y with your statement, aka yarn init -y (also yarn init --yes) to answer yes to everything prompted.

Yarn add

Here’s how to add a package with yarn:

yarn add <package name from npm>

yarn add jquery

This is exactly the same as if you were to use:

npm install jquery
npm install jquery --save

By default, yarn add saves the dependency to your package.json and updates a yarn.lock file it created to the exact version you downloaded. You can verify this by running cat package.json and cat yarn.lock in your Terminal or Command Line. If you need –save-dev, you can use: yarn add <package-name> -D (or --dev).

Yarn why?

What if later you want to see why you added jQuery? Like why dude?

yarn why jquery

Here’s your answer master:

yarn why v1.22.4
[1/4] 🤔  Why do we have the module "jquery"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "jquery@3.5.0"
info Has been hoisted to "jquery"
info This module exists because it's specified in "dependencies".
info Disk size without dependencies: "1.7MB"
info Disk size with unique dependencies: "1.7MB"
info Disk size with transitive dependencies: "1.7MB"
info Number of shared dependencies: 0
✨  Done in 0.09s.

Yarn remove

Ugh, jQuery — no one uses THAT library anymore! It’s all about ES6!

yarn remove jquery

Yes master, whatever you say master… No Judgment Here…. –__-“

yarn remove v1.22.4
[1/2] 🗑  Removing module jquery...
[2/2] 🔨  Regenerating lockfile and installing missing dependencies...
success Uninstalled packages.
✨  Done in 0.12s.

Yarn upgrade

Install gulp for me yarn. I remember something like Gulp 3? 4? Give me a version.

yarn add gulp@3
yarn upgrade --latest gulp

Yes master, whatever you say master!! AIYEEEE

cat package.json
{
  "name": "myApp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "gulp": "4.0.2"
  }
}

Yarn list

Shows you all the packages installed and their respective dependencies (at version numbers). Use the –pattern flag to zero in on any package you want to know more about:

yarn list --pattern gulp
yarn list v1.22.4
├─ gulp-cli@2.2.0
├─ gulp@4.0.2
└─ gulplog@1.0.0
✨  Done in 0.26s.

Even More Yarn

yarn run #for any scripts you want to run from package.json

yarn run test #to run your tests

There’s a lot more useful commands, you can check everything out at: https://classic.yarnpkg.com/en/docs/cli/list.

You can also use the command below to get a detailed list of commands in your terminal or command prompt:

yarn help

Summary

  • Yarn is a cool drop in for npm
  • You can still use npm if you want, but don’t you think yarn is faster? This is because yarn works by installing dependencies in parallel (while npm is sequential)
  • Yarn also checks for security better than npm
  • Yarn’s algorithms are designed to check for package.json conflicts; often you’ll download conflicting package versions of a dependency with npm which can lead to nasty bugs — yarn watches out for this and lets you sleep better at night.
  • Finally, yarn guarantees an install that worked on one system will work exactly the same way on any other system — Yarn Website.
  • Are you ready to use yarn yet?

Thanks for reading!

Vijay, JavaScriptLA Lead