Installing a dependency

Adding a library to your project is the first command you will repeat a thousand times. This lesson covers the syntax for npm, pnpm, and bun, and the distinction between regular and development dependencies.

The basic command

With pnpm (recommended):

$pnpm add react

With bun:

$bun add react

With npm:

$npm install react

All three commands do the same thing: download the package, add it to dependencies in package.json, and update the lockfile.

Development dependencies

Some packages are only useful during development: TypeScript compilers, linters, test frameworks. You do not want them in production. Use the -D flag (or --save-dev):

$pnpm add -D typescript

$bun add -d vitest

$npm install --save-dev eslint

These packages land in devDependencies in package.json instead of dependencies.

Understanding semver versioning

When you install a package, package.json records the version with a prefix:

{
  "dependencies": {
    "react": "^18.3.0",
    "lodash": "~4.17.21",
    "some-lib": "2.1.0"
  }
}

• ^18.3.0 (caret): accepts any 18.x.x version greater than or equal to 18.3.0. Minor and patch updates are allowed.
• ~4.17.21 (tilde): accepts 4.17.x only. Only patch updates are allowed.
• 2.1.0 (exact): this precise version, nothing else.

The caret ^ is the default for pnpm, bun, and npm. It works for most cases.

Installing global packages

For a CLI tool you want available everywhere (e.g., vercel, http-server):

$pnpm add -g vercel

$npm install -g vercel

Prefer pnpm dlx (or npx) for one-off commands instead of global installs:

$pnpm dlx create-next-app my-app

Reinstalling all dependencies

When you clone an existing project, you have no node_modules/. Just run:

$pnpm install

pnpm reads the lockfile and installs exactly the same versions as the project author.