Pixel and Ink
Published in

Pixel and Ink

Switching an NX repo to use PNPM

https://pnpm.io is a new package manager for the node space, it focuses on performance and best practices. We have seen a decent drop in clean install times for all our projects after switching from Yarn. Some projects dropped from ~2mins to ~30 seconds.

Things to note

Ensure you build/run everything after conversion

PNPM does not hoist all dependencies into your node_modules root, this means if the package.json doesn’t reference a dependency that your code require()’s or imports then it will fail to resolve.

This is the biggest hurdle in the migration but a very worthwhile exercise.

You can use this CLI flag to get around it if you really need to

Migration

1. Install PNPM and create lock file

npm i -g pnpm

If you are using NPM then you can use the pnpm import command to import the npm lock file.

There is a PR for yarn.lock up right now https://github.com/pnpm/pnpm/pull/2836

We just used the opportunity to upgrade our transitive dependencies.

2. Setup only-allow-pnpm

It is hard to break habits. I will often open a repo then type yarn. By setting this up you will get an error if you do that.

NOTE: If you use yarn tsc or similar to run node cli tools, you will need to use pnpx tsc now to execute those cli tools. Or create scripts in your package.json like

"scripts": {
"changeset": "changeset"
}

3. Setup mono repo support with pnpm

To support a mono repo we need to setup a workspace in PNPM so it can discover all the package.json files for apps and libs in NX.

The docs are at https://pnpm.io/pnpm-workspace_yaml

For NX we just need to create a pnpm-workspace.yaml file with the below contents:

packages:
- 'apps/**'
- 'libs/**'

--

--

--

Seven West Media (WA) Digital Team blog.

Recommended from Medium

Adding automatic dark mode to a website

Should you use a UI framework?

Bridging the gap from JavaScript to native user preferences in React Native

Diving into React (May hack days)

If you happen to work in one of these areas, it’s worth giving TypeScript a shot. And if you

React Native for Android: Basic Knowledge Before Coding

Rendering React elements into Infinite Scrollable tables using the Least Recently Used (LRU) cache…

Closest Numbers — HackerRank

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jake Ginnivan

Jake Ginnivan

Co-Founder featureboard.app | Principal Consultant arkahna.io | Previously Tech Lead Seven West Media WA | International Speaker | OSS | Mentor

More from Medium

You should probably be paying closer attention to your CI build times

The hidden costs of outsourcing Software Development

Take The Leap to GraphQL with MetricQL

How I Reindex Elasticsearch Without Downtime