WTF is Yarn Plug'n'Play (PnP)?

Install Yarn 2

Use Yarn dlx to Execute Packages without Installing Them

Use yarn up to Update Dependencies In A Yarn Workspace

Yarn 2 AKA Berry

Yarn PnP is a new feature set on **by default** with yarn 2. PnP gets rid of your projects `node_modules` in favor of a `.pnp.js` file.

This `.pnp.js` file maps all of the packages installed in your project to where Yarn has placed them on your disk. This enables faster, more reliable installs because you don't have to write to disk as often.

Instructor: [0:00] Plug'n'Play is a new feature set on by default in Yarn 2. It tries to solve the problems that the community has run into with Node modules.

[0:10] Node module directories often take a lot of disk space. Generating them can sometimes take more than 70 percent of the time during a Yarn install. There are other issues that you can read about on Yarn's documentation site.

[0:30] Yarn tries to solve these issues by creating a .pnp.js file. This file is generated instead of Node modules. If I head over to VS Code, I'm running Yarn 2, all I've done is initialize package.json. When I yarn add xstate, they log out all of my packages. You can see that a .pnp.js file has been created as well as the usual yarn.lock file.

[1:03] You'll notice that the Node module's directory hasn't been created. This .pnp file replaces the Node module directory. This file points Node to the location where these Node modules have been installed.

[1:19] As an example, we'll hop over to our .pnp file, and you can see here that the package location is ./ and the package dependencies are xstate. Since I have a local install of Yarn 2, not a global one, Yarn has created this .yarn file, and this is where all of my npm packages will be installed.

[1:54] As you can see, this is our xstate package. It's a zip, but if you review in Finder and unzip, you'll see that it contains a Node modules folder with xstate.

Course

Yarn 2 AKA Berry

WTF is Yarn Plug'n'Play (PnP)?

Share this video with your friends