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.