Introduction to pnpm, a drop-in replacement for npm that helps reduce disk space usage.

In a previous blog post, I discussed the issue of having huge node_modules folders and how it doesn’t necessarily have to be a bad thing. However, finding ways to reduce our hard drive consumption is always a plus, especially considering that newer computers in 2019 are shipping with smaller SSD drives. One way to address this is by centralizing the storage of library code and sharing it across all the projects we work on.

This is where pnpm comes in. It’s an amazing project that you can find at https://pnpm.js.org. Pnpm is essentially a drop-in replacement for npm. Once you install pnpm, you can simply use the command pnpm install to download project dependencies, and the tool will handle everything transparently for you.

If you have multiple projects that use the same version of React, for example, pnpm will only install it once and then reference that installation across all your other projects. This not only saves disk space but also makes the project initialization faster compared to the standard npm procedure. Even if npm cached the package, pnpm still outperforms it by creating a hard link to the central local repository instead of making a copy of the package from the cache.

To get started with pnpm, you can install it using npm with the following command:

npm install -g pnpm

Once installed, you can use all your familiar npm commands with pnpm:

pnpm install react
pnpm update react
pnpm uninstall react

Companies that need to maintain a large number of projects with the same dependencies, such as Glitch, greatly appreciate pnpm. In addition to the usual npm commands, pnpm provides some useful utilities, including pnpm recursive. This utility allows you to run the same command across all the projects in a folder. For example, you can initialize 100 projects stored in the current folder by running pnpm recursive install. It’s quite handy!

If you use npx, which is the recommended way to run utilities like create-react-app, you can also benefit from pnpm by using the pnpx command that comes with pnpm:

pnpx create-react-app my-cool-new-app

Wondering where the packages are installed? On macOS, they are stored in the ~/.pnpm-store/ folder (where ~ represents your home folder). As an example, when I installed lodash, this was the resulting folder structure:

➜ ~ tree .pnpm-store/
.pnpm-store/
└── 2
 ├── \_locks
 ├── registry.npmjs.org
 │   └── lodash
 │   ├── 4.17.11
 │   │   ├── integrity.json
 │   │   ├── node\_modules
 │   │   │   └── lodash
 │   │   │   ├── ...
 │   │   ├── package -> node\_modules/lodash
 │   │   └── packed.tgz
 │   └── index.json
 └── store.json

There are many more advanced features and capabilities of pnpm to explore, but I hope this gives you a good starting point with pnpm!

Should you use pnpm for your day-to-day development? Probably not, unless you have specific needs that this tool can address, such as limited disk space.