w3resource

Getting started with Plug n Play


In the last tutorial we gave you an overview of what Plug'n'Play is, as well as why you will need it.

Now we will show you how to get started with Plug'n'Play.

It is not difficult to get started with Plug'n'Play, all you need to do is to enable a single setting in your package.json file: installConfig.pnp.

```{
  "installConfig": {
    "pnp": true
  }
}```

Once you do this, Yarn will create a file named .pnp.js each time you run yarn install rather than the node_modules folder. To enable this setting in from your command line run yarn --pnp in your project, running this command will enable the setting as shown above and also run the install in the same pass!

As you can see, it is not complicated to enable PnP at all, the issue you might encounter are with third-party packages that implement the Node resolution again. Here are three major implementations that exist, there could be more that exists from one project to another:.

  • resolve: This is the main one, and it is supported out-of-the-box thanks to the help of Jordan Harband. Every package that use resolve (and this also include things you might have heard of like Babel or Gulp) can now works without any further configuration.
  • enhanced-resolve: This is the second biggest one. You probably use enhanced-resolve but it is also possible that you have never heard about it: it is the resolver used by Webpack. This resolver is supported through the pnp-webpack-plugin addon.
  • TypeScript: This uses its own resolver as well. This is a bit more complex case- the TypeScript team has some concerns about allowing third-party hooks inside the tsc compiler, this means, that we cannot work with it at the moment. That being said, TypeScript is not just tsc and as such Yarn has been able to add PnP support to the popular ts-loader - what it implies is that, as long as you compile your TypeScript using Webpack, everything will work well!

In case you find something that does not work, you should consult the Yarn's Troubleshooting section for some tips, then open an issue if things are still problematic. and finally put node_modules behind us once and for all.

Previous: Migrating from npm
Next: Overview of PnP