Use Yarn Like a Pro

This post is by Hashrocket from Hashrocket

Click here to view on the original site: Original Post

Yarn is a fast, reliable, and secure alternative to NPM. In this post, we'll look at techniques to use Yarn to its fullest.

The expectations of life depend upon diligence; the mechanic that would
perfect his work must first sharpen his tools. —Confucius

Yarn is a great tool. I'm won't wade into the Yarn vs. NPM debate,
because the tradeoffs are always in flux. I just say that I've been
using it for two years on a variety of projects, and have nothing but praise.

Part of that journey has been learning Yarn's nuances, and today I'm happy to be
sharing them with you. Some of these epiphanies came to me through my own work,
and some via our company knowledge base, Today I

I'm going to skip the setup and some common Yarn commands; head over to Yarn's
official site
to boot up. All of these commands were
against Yarn 1.7.0.

Alias Yarn

Let's start out with a quick win. Alias yarn to y and enjoy those saved keystrokes.

# .bashrc (or equivalent)

alias y='yarn'

To minimize confusion, be using the full yarn command throughout the rest of this post.

Initialize a Project

I love initializers. Any heavy-handedness is outweighed by
having the right files in place from the start. Like
NPM, Yarn has a command for initializing a new JavaScript project.

$ yarn init

Run this from your project directory; it creates a package.json file with all the basic details.

Bootstrap an App

Yarn includes a create command for generating bootstrapped apps, following the create-<name>-app convention. Here's how you'd use it with create-react-app:

$ yarn create react-app my-app

Type Less with the Default Command

Like Bundler for Ruby, yarn with no other qualifier runs yarn install,
passing through any provided flags. If updating JavaScript packages is your
intention, run yarn and enjoy those saved keystrokes.

Update Packages Automatically

This isn't a Yarn-specific tip, but for me it's essential when using this tool.
When I pull down changes to a JavaScript project, those changes can add,
update, or remove dependencies. Unlike a language like Elixir, in JavaScript it's possible to start your server, run your tests,
or do a number of activities without syncing your packages. When your
local code chokes, which it will, the results can range from annoying to

Here's my solution, which I borrowed from the internet a while
ago. This is the executable file .git/hooks/post-merge and it lives in the
root directory of all my collaborative JavaScript projects:

#/usr/bin/env bash

changed_files="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"

check_run() {
  echo "$changed_files" | grep --quiet "$1" && eval "$2"

check_run yarn.lock "yarn"

When my Yarn lockfile changes in version control, this script runs yarn (AKA
yarn install, as explained above), keeping me current. This has saved me many times, and it's just less mental overhead.


To quote Dorian Karter: "The node_modules directory is often a resource-consuming hog, both in space and number of files. It is full of junk such as
test files, build scripts, and example directories." We want a repo full of quality code, not cruft.

yarn autoclean to the rescue. Autoclean cleans and removes unnecessary files
from package dependencies. To enable it, you first must generate the
.yarnclean config file:

$ yarn autoclean --init

.yarnclean lists about forty files you should remove from a typical
JavaScript project. Once enabled, autoclean will remove them when you install or add
dependencies, or force it to run. Here's what happened when I set it up on a long-running React

$ yarn autoclean --force
yarn autoclean v1.13.0
[1/1] Cleaning modules...
info Removed 8588 files
info Saved 53.06 MB.

Enjoy your pruned program.

Add an Alias

Naming collision ahead? Alias a dependency with yarn add:

$ yarn add react-select@v1.2.0
$ yarn add react-select-next@npm:react-select@next

Now you can import your aliased dependency like so:

import Select from 'react-select-next'

Test Your Build

create-react-app is an example
of a project that requires all dependencies precompiled to ES5. If they aren't,
the build will fail.

A bad time to discover this would be when your tooling is trying to build
the app on a staging or production server. Surface this issue in development like so:

$ yarn <your-build-step>

Just run your build command anytime you add a new dependency. This could be even be added as a post-merge step.


We've barely scratched the surface of what Yarn can do. If you write a lot of JavaScript, I recommend exploring this tool!

Thank you to Andrew Vogel, Brian Dunn, Chris Erin, Dorian Karter, Gabe Reis, and Josh Branchaud for writing about Yarn on Today I
. We've all been learning together as this
library matures.

What are your favorite Yarn hacks? Let us know on

Photo by Steve Johnson on Unsplash

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.