Getting started with Plug’n’Play isn’t difficult - at its basis it just involves enabling one tiny settings in your
From now on each time you’ll run
yarn install Yarn will create a single file named
.pnp.js instead of the
node_modules megafolder. You can try it right now by running
yarn --pnp in your project, which will enable the settings and run the install in the same pass!
.pnp.* should also be added to your
.gitignore. (see which files should get ignored)
So enabling PnP isn’t complicated at all - what might be an issue are third-party packages that reimplement the Node resolution themselves. Three major implementations exist, more might also hide from a project to another:
resolveis the main one, and is supported out-of-the-box thanks to the help of Jordan Harband. Every package using
resolve(and that includes things you might have heard of like Babel or Gulp) now works without further configuration.
enhanced-resolveis the second biggest one. You probably use it but might never have heard about it: it’s the resolver used by Webpack. We do support this resolver through the pnp-webpack-plugin addon.
TypeScript uses its own resolver as well. In this case the situation is a bit more complex - the TS team has some concerns about allowing third-party hooks inside the
tsccompiler, meaning that we can’t work with it at the moment. That being said, TypeScript isn’t only
tscand as such we’ve been able to add PnP support to the popular
ts-loader- meaning that as long as you compile your TypeScript through Webpack, everything works well! Consult the dedicated section about it for more information.
node_modules behind us once and for all.