by Jake Worth on February 19, 2019

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 Learned.

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 run against Yarn 1.7.0.

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.

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.

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

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.

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 disastrous.

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 project:

$ 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.

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'

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 Learned. We've all been learning together as this library matures.

What are your favorite Yarn hacks? Let us know on Twitter.

Photo by Steve Johnson on Unsplash