Start a Project
Call Us  0161 505 1048


Meet Yarn: A Drop in Replacement for npm

31 October 2016
Yarn Logo | Meet Yarn: A Drop in Replacement for npm | Neon

If you have been developing anything with JavaScript in the past few years, you might be feeling a little bit of fatigue. Hardly a week goes by where there isn’t some new tool or package that you must be using, replacing or changing to complete your workflow. This happened to our development team recently when one of the frameworks we use, Roots, changed from using gulp for builds to webpack. But, in all of this madness, at least you can rely on the one consistent install amongst all of these new-fangled toys: npm. Well, guess what? Now even that has an alternative, in the form of Yarn.

Yarn attempts to fix one of the fundamental issues with npm; consistency across a device. npm (especially v3 and above) tries its best to resolve dependencies as flatly as possible (ie: it attempts to avoid a nodemodules/package/nodemodules/package/node_modules like structure), but depending on the order you’re adding packages to your install, this can vary wildly between machines. If you’ve ever come across the age-old “but it works on my machine” problem, chances are this is why. Yarn takes a different approach to dependency resolution, to ensure consistency in dependency layout/versioning across development environments; writing lock files with ordered keys to ensure any changes are simple to execute. If you develop on Windows, this is especially handy, as it removes the issues with multiple nested directories.

The install process is broken down into three steps:

Resolution: Yarn starts resolving dependencies by making requests to the registry and recursively looking up each dependency.
Fetching: Next, Yarn looks in a global cache directory to see if the package needed has already been downloaded. If it hasn’t, Yarn fetches the tarball for the package and places it in the global cache so it can work offline and won’t need to download dependencies more than once. Dependencies can also be placed in source control as tarballs for full offline installs.
Finally, Yarn links everything together by copying all the files needed from the global cache into the local node_modules directory.
Ironically, Yarn is installed via npm:

npm install -g yarn

As it’s a drop in replacement, wherever you used npm in your workflow, you now use yarn

However, there are some notable exceptions:

npm install becomes just yarn

npm install --save <package> becomes yarn add <package>

Underneath, Yarn currently uses the same repositories as npm does. However, given the issues this year with the left pad issues, it would not be a surprise if this changes in the future. The project has been worked on as a collaboration between the development teams at both Facebook and Google, along with a number of other companies. Given their usages of npm, it’s imaginable that they will want a situation where an issue such as left pad can never happen, whilst at the same time, bringing more control (and hopefully structure) to the Javascript tooling area.

We’ve been using Yarn at Neon for a couple of weeks, and have found it to be a quick and easy replacement for npm, with the most difficult part being retraining our muscle memory to not type npm! So far, we haven’t come across any package related issues, but if we do, this post will be updated to reflect them.

Have you introduced Yarn into your development team? We’d be interested to know your thoughts – tweet us @createdbyneon.

Related Items

How to create landing pages that convert

What is a content delivery network?

What is mobile-first design?

We are here to help

Want to be at the top of the search ranks? How about a website that’ll give your audience a great experience? Or maybe you’re looking for a campaign that’ll drive more leads? Get in touch to find out how we can help.

Start a project
The design and dev team making notes | Start a project with Neon | Neon
Employee on telephone
Group work
Designer laughing
Computer typed on
Sausage dog
Writing on white board
Designer planning sitemap
Employee posting notes on board
Developer working
Group photo of CEO and Brand Ambassador
Employee in meeting
Employee in Meeting

Stay up to date

Privacy Policy

© Neon Digital Agency Ltd 2021. Part of

Inc & Co Logo