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

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.