iJS CONFERENCE Blog

pnpm - The High-Performance Package Manager

Hitchhiking through the JavaScript jungle

Feb 14, 2024

It’s hard to imagine developing TypeScript applications without package managers, and the same is true for JavaScript. But you should avoid non-type-safe variants as much as you can in your daily work. What would the web community be like if there was just one package manager? We can fall back on several alternatives, to be precise, three of them. This article will look at pnpm. This package manager is somewhat of an outsider compared to npm and Yarn. However, it’s becoming increasingly popular and not without reason, as you’ll see below.

Installation and general functionality

 

Like the other package managers, pnpm is open source software subject to the MIT license and is developed on GitHub. I’m pleased to say that pnpm is fully implemented in TypeScript and has good test coverage. Incidentally, Jest is used as the test framework. Therefore, pnpm is a thoroughly modern and up-to-date tool as far as its code is concerned. pnpm is a pure community project without backing from a large company like Microsoft or Facebook, which isn’t the worst prerequisite for an independent package manager.

There are several ways to install pnpm on your system, ranging from a simple installation script to your system’s package manager to Corepack. The methods differ significantly on the respective systems, so I’d like to refer you to the documentation. Installing with npm and Corepack works the same on all systems. For npm, use the command npm install -g pnpm. This installs pnpm piggyback, so to speak.

The more elegant option is using Corepack, the package manager for Node. In Node version 20, Corepack is still an experimental feature, so you must manually activate it with the command corepack enable. Then, you can use the command corepack prepare pnpm@latest –activate to activate and use the latest Corepack version on your system.

 

iJS Newsletter

Keep up with JavaScript’s latest news!

The most important commands

 

After installation, you can use pnpm directly on your system’s console. As with other package managers, this tool also provides a whole range of commands for managing packages:

  • pnpm init: You can start developing your application with the init command. It generates a package.json file.
  • pnpm add : When installing packages, pnpm follows Yarn’s idea and distinguishes between adding a package with the add command, and installing all required packages if they aren’t already on the system. The latter is done with the install command. By default, the add command installs a package as an ordinary dependency. With additional options, you can also install it as a dev dependency for development mode (-D), optional dependency (-O), or global (-g).
  • pnpm update: As you’ve probably already guessed, you can use this command to update packages. You can either update all installed packages or specify a pattern and only update certain packages. By default, the command sticks to the spans specified in package.json. But you can override this rule with the –latest option and go directly to the latest version.
  • pnpm remove: The remove command removes an installed package and all its dependencies from the configuration files and the file system. You should avoid deleting packages manually. The risk of overlooking something or accidentally removing too much is too great.

As you can see, pnpm’s command line is just as robust as other package managers.

 

The core idea behind pnpm

 

Despite all their similarities, every package manager has its own peculiarities, otherwise we wouldn’t need to choose between three different implementations. You can get a pretty good impression of the package managers just by looking at their websites and which topics the solution advertises. pnpm’s noteworthy features are its speed and how it handles the file system:

  • Speed: pnpm claims to be up to twice as fast as the competition. Fortunately, the project also provides benchmarks. Depending on the kind of installation you do, pnpm is well ahead in some cases. Especially with a full reinstallation of packages from a package.json without cache, lockfile, and node_modules directory, pnpm is significantly faster, taking 17 seconds. npm takes 43 seconds and Yarn takes 20 or 22 seconds.
  • Efficiency: pnpm is much more economical when it comes to storage space for dependencies. If you work with npm, the package manager stubbornly downloads all packages and saves them in the local node_modules directory. If you have several applications with the same dependencies, the packages are stored multiple times on the file system. pnpm only stores files centrally once and only files that have differences. The projects get a reference to the central storage so that no unnecessary copies can exist.
  • Monorepo support: The feature behind the term monorepos – multiple packages per project – is called Workspace. Workspaces aren’t longer a unique selling point for package managers, since both npm and Yarn have a similar feature.
  • Strictness: pnpm stores dependencies in a deep hierarchy. This lets the package manager ensure that the code only has access to top-level dependencies. All dependencies below are only available to the packages responsible for their installation.

pnpm can do a lot more besides the aforementioned features. You can work well without the alias feature, but under circumstances, it can help solve some problems for you.

 

EVERYTHING AROUND ANGULAR

The iJS Angular track

 

Aliases in pnpm

 

You can use an alias to give a package a different name. This lets you replace one package with another without changing your application’s source code. A mandatory requirement for this is that all parts of the packages you use are API-compatible with each other. Otherwise, you’ll just be inundated with errors and the alias is of no help at all. In the documentation, you’ll see an example of using the lodash library. It will be replaced by a new package with the name awesome-lodash.

Use the command pnpm add lodash@npm:awesome-lodash to install the awesome-lodash package and integrate it into your application with the name lodash.

 

pnpm workspaces

 

A workspace is a project containing several packages. This set-up is interesting if you’re implementing one or more applications and accessing shared functionality. You can organize individual components as packages. Workspaces can also be used to implement frameworks or libraries made up of several self-contained packages. You can manage everything in a standardized repository. The only requirement is having a pnpm-workspace.yaml file in the project’s root directory.

The package manager links individual pancakes in the workspace, so that changes immediately take effect without having to install the new version first. pnpm automatically recognizes the relationship between packages in the workspace. If you want more control here, you can use the workspace: prefix along with the package number specification. If the specified version isn’t part of the workspace, pnpm will report an error. Some popular packages that use pnpm and its workspace feature include Next.js, Vite, and Vue.

 

What can we learn from this?

 

When it comes to package managers, it’s all about speed and reliability at the same time. In terms of reliability, all package managers have done their homework. This means that it doesn’t really matter whether you rely on yarn, npm, or pnpm. All three work reliably and are reproducible. Mainly, package managers now focus on package installation speed. Here, pnpm scores ahead of the competition. Installing packages is extremely fast, especially compared to its biggest competitor, npm. pnpm also shows strengths in how it uses disk space. It is not that the package manager is so small, but because it works cleverly while managing installed packages and avoids duplicates where possible. This argument wouldn’t carry much weight if we were not talking about JavaScript, where even an empty Hello World application can be up to 100-300 MB (such as empty Angular or React applications with all their build tools).

If you opt for using pnpm, you don’t have to worry about backing the wrong horse. The package manager has been around for several years, with a stable and very active community, and receives regular updates. When it comes to usage or available packages, you don’t need to make any compromises compared to the competition.

Sign up for the iJS newsletter and stay tuned to the latest JavaScript news!

 

BEHIND THE TRACKS OF iJS

JavaScript Practices & Tools

DevOps, Testing, Performance, Toolchain & SEO

Angular

Best-Practises with Angular

General Web Development

Broader web development topics

Node.js

All about Node.js

React

From Basic concepts to unidirectional data flows