1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

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

    Ian JonesIan Jones
    yarnYarn

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    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.