This site runs best with JavaScript enabled.

Yarn 2 🧶

Ian Jones

January 27, 2020


Yarn 2, after almost 2 years, has released a stable version. There are some major upgrades. So much so that many people in the community feel like it needs to be released under a different name (github issue link).

I've created a short 5 minute collection on egghead to detail some of the features that look helpful.

What even is Yarn Plug'n'Play (PnP)?

https://egghead.io/lessons/yarn-wtf-is-yarn-plug-n-play-pnp?pl=yarn-2-4526

Yarn PnP is a new feature that is on by default in yarn 2. It is an attempt to solve some of the issues that the community has ran into with node_modules. As we know, node_modules can sometimes be the size of a black hole.

https://twitter.com/jordwalke/status/1077466416733798400?s=20

Another issue is all of the I/O operations node_modules cause, this doesn't give yarn or any package manager much room to optimize.

Enter Yarn PnP

Yarn will generate a .pnp.js file in your project instead of a node_modules directory. This file will map node to where yarn has installed your packages.

This makes installs much faster and sometimes even Zero-Install. If you have all of the packages in your global cache already, then nothing needs to be installed again and you can just run your project.

Install Yarn 2

https://egghead.io/lessons/yarn-install-yarn-2?pl=yarn-2-4526

Currently, Yarn 2 is only install-able through npm. You can can install it globally with under the berry flag.

npm install -g yarn@berry

If you don't want to install yarn 2 globally, yarn lets you set the version of your yarn package on a per-project basis.

yarn policies set-version berry

This command will generate a .yarnrc file as well ass a .yarn directory. The .yarnrc file maps to the install of yarn you want to use. .yarn is where the executable js file will live as well as the cache of node_modules that will be created will exist.

Yarn dlx

https://egghead.io/lessons/yarn-use-yarn-dlx-to-execute-packages-without-installing-them?pl=yarn-2-4526

yarn dlx (stands for download and execute) is the counterpart to npx. It allows you to run a package on the registry one time without having to install it in your current project.

Yarn up to update workspace dependencies

https://egghead.io/lessons/yarn-use-yarn-up-to-update-dependencies-in-a-yarn-workspace

Yarn 2 is now workspace aware. When you need to upgrade a package in one workspace, yarn will ask you if you want to resolve the version of the package to a version you use in a different package.

When you have a workspace set up. You can run yarn up -i :package_name to upgrade packages in each of your workspaces.

Say you have 2 workspaces that have different versions of react:

package-1 has react 16.12.0 and package-2 has react 16.0.0.

When we ran yarn up -i react, yarn asks us 4 questions first for package-1 then for package-2:

  • Keep react@^16.12.0 (no changes)
  • Reuse react@^16.12.0 (originally used by package-1@1.0.0)
  • Reuse react@^16.0.0 (originally used by package-2@1.0.0)
  • Use react@^16.12.0 (resolved from latest)

This first option is clear: nothing would happen and its the one we would choose for package-1.

The second option is asking us if we want to use the version package-1 is using, but this is still the same version because we are updating package-1 itself.

The third is asking if we want to us package-2's version of react. but this is an older version so we wouldn't want to do that.

The fourth asks us if we want to use the latest resolved version of react but package-1 is on the current version so there is no difference.

Next, it will ask use the same questions for package-2 and we would select option 2 which would be Reuse react@^16.12.0 (originally used by package-1@1.0.0).

Resources

Discuss on TwitterEdit post on GitHub

Share article