DEV Community

Cover image for Transition to pnpm
Francesco Menghi
Francesco Menghi

Posted on

Transition to pnpm

I spent the week working on a Pull Request to replace the usage of npm with pnpm in the telescope project.

Of course this is a change that will impact every contributor going forward, so I would like to use this blog post as a guide to get you setup and get comfortable using pnpm.

Why changing?

pnpm is an awesome package manager that is considerably faster than npm and a lot more disk efficient. You can find more information on how it works in their docs.

Here is a test to give you an idea of the difference:

Package Manager Install Time Install Size
npm 6m 30s 1.29G
pnpm 1m 8s 0.68G

Using pnpm is also speeding up our GitHub Actions CI! All of the workflows now finish in around 10 minutes compared to an average of 15 minutes using npm.

As you can see, moving to pnpm is a great step forward for our telescope development.

How to get started

To get started make sure you have Node.js with npm installed and then run the command:

npm install -g pnpm
Enter fullscreen mode Exit fullscreen mode

If you have node_modules previously installed by npm, you should delete them. To do so, from the root of the telescope folder, run the following command:

npx npkill
Enter fullscreen mode Exit fullscreen mode

Using npkill, select node_modules with the cursor arrows and press SPACE to delete them one by one. You can then exit by pressing Q.

Make sure to pull the latest changes from upstream:

git pull upstream master
Enter fullscreen mode Exit fullscreen mode

And now you are ready to install all your dependencies with pnpm:

pnpm install
Enter fullscreen mode Exit fullscreen mode

Using pnpm

pnpm is surprisingly easy to use if you know the basics of npm.

You can run tests:

pnpm test
Enter fullscreen mode Exit fullscreen mode

To run scripts, you don't use run like in npm:

pnpm <script-name>
Enter fullscreen mode Exit fullscreen mode

For example, instead of npm run services:start use pnpm services:start.

If you want to add a new dependency, cd into the right path where the package will be added, then use:

pnpm add <pkg-name> # Save to dependencies
pnpm add -D <pkg-name> # Save to devDependencies
Enter fullscreen mode Exit fullscreen mode

For example, to add a dependency to the frontend:
cd src/web then pnpm add <pkg-name>.

This will update package.json and pnpm-lock.yaml (You will need to add both to your commit).

If you need more information on how to use pnpm, the docs are a great resource. I have also updated the telescope Environment Setup to help newcomers getting started.

I am super excited about this change and I hope everyone in the telescope community will love it as well! 😎

Top comments (4)

Collapse
 
kissu profile image
Konstantin BIFERT

What was the NPM version in this example?

Collapse
 
menghif profile image
Francesco Menghi

Don't know the exact version used but definitely > 8.0

Collapse
 
aitor profile image
dragonDScript

Yarn is far more popular and has these advantages. Consider it

Collapse
 
menghif profile image
Francesco Menghi

Yarn might be similar to pnpm when it comes to speed but it does not have the same disk efficiency. pnpm installs packages in a central location and then creates hard links to reference them.