npm vs yarn vs pnpm

npm, yarn, and pnpm are three different delivery trucks that all bring the same packages to your project, just with different speeds and habits.

In this page:

What a Package Manager Does
Key Command Differences
Why pnpm Saves Disk Space

What a Package Manager Does

npm, yarn, and pnpm all do the same core job: read a list of dependencies and download the right package versions into your project. They differ mainly in speed, disk usage, and lockfile format.

Note: Any of the three works fine for learning -- npm comes bundled with Node.js so it needs no extra install.

Warning: Mixing lockfiles from different package managers in the same project (package-lock.json alongside yarn.lock) can cause inconsistent installs.

Example: What a Package Manager Does

bash

npm install react
yarn add react
pnpm add react
# all three fetch the same package from the npm registry

⚠️ Run this in your own terminal or Node.js environment.

Key Command Differences

The everyday commands map closely across tools: installing a package is npm install pkg, yarn add pkg, or pnpm add pkg; running a script is npm run dev, yarn dev, or pnpm dev.

Note: Stick to one package manager per project so teammates don't end up with mismatched lockfiles.

Warning: yarn dev (no run) works because yarn allows omitting run for script names -- typing the same shortcut in npm does not always work the same way.

Example: Key Command Differences

bash

Task          npm            yarn        pnpm
Install all   npm install    yarn        pnpm install
Add package   npm install x  yarn add x  pnpm add x
Run a script  npm run dev    yarn dev    pnpm dev

⚠️ Run this in your own terminal or Node.js environment.

Why pnpm Saves Disk Space

pnpm stores one copy of each package version on disk and links it into every project that needs it, instead of duplicating node_modules per project the way npm and yarn classically do. This can save significant disk space across many projects.

Note: pnpm is worth trying once you're comfortable with npm and working across several projects at once.

Warning: Some older tooling assumes npm's flat node_modules layout and can misbehave under pnpm's stricter linking -- check compatibility if you hit strange errors.

Example: Why pnpm Saves Disk Space

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
function DiskSpaceDemo() {
  return (
    <div>
      <p style={{background: '#e57373', width: '260px', padding: '8px', color: '#fff'}}>
        npm/yarn: full copy of react in every project
      </p>
      <p style={{background: '#81c784', width: '90px', padding: '8px', color: '#fff'}}>
        pnpm: linked
      </p>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<DiskSpaceDemo />);
  </script>
</body>
</html>

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson Installing Node.js and npm Next Lesson → Creating an App with Create React App

npm vs yarn vs pnpm

What a Package Manager Does

Key Command Differences

Why pnpm Saves Disk Space

Chapter Quiz — Complete all 10 topics to unlock

Login to run this code