Pebellslearn by building
0%
RoadmapsMatrixCoursesSandboxSign in
Package Managers  ›  Lesson

npm and package.json

npm 14 minpackage.json records a project's dependencies, dev dependencies and scripts, and npm installs them from the registry into node_modules, which is never committed.

npm and package.json

The bakery wants a photo carousel and a date picker for cake orders. You could write both from scratch, or use well-tested code other developers have already shared. Packages are that shared code, and a package manager downloads them, tracks them and keeps every teammate's copy the same. npm is the one that comes with Node.js.

The rule

package.json lists what the project needs; the package manager fetches it.

Start a project's manifest with:

npm init -y

This creates package.json, a small JSON file describing the project:

{
  "name": "crumb-site",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "flatpickr": "^4.6.13"
  },
  "devDependencies": {
    "vite": "^5.4.0"
  }
}

Installing packages.

npm install flatpickr        # needed by the site itself
npm install -D vite          # needed only while developing
  • npm install <name> downloads the package from the npm registry, the big public library of packages, and adds it to dependencies.
  • -D (short for --save-dev) puts it under devDependencies instead: tools you need for building and testing, but which the finished site does not run.
  • The code lands in a node_modules folder, along with every package those packages depend on. That folder gets large quickly.

Recreating the setup. A teammate who clones the repository gets package.json but not node_modules, because node_modules belongs in .gitignore. They run one command:

npm install

With no name after it, npm install reads package.json and installs everything listed.

Scripts. The scripts section gives short names to common commands. npm run dev runs vite; npm run build runs vite build. A few names such as test and start also work without run. Scripts can use tools installed in node_modules directly, so nobody has to install them globally.

The shortcut

For every package, ask "Does the finished site need this to run in the visitor's browser?" Yes: a normal dependency. No, it only helps you build, test or check code: a dev dependency with -D.

Setting up the bakery projectStep 1 of 4

  1. Create the manifest

    npm init -y writes a starter package.json.

The trap is committing node_modules. It is huge, it can be rebuilt at any time, and some of its contents are specific to one operating system. A related habit to avoid is installing project tools globally with npm install -g. Different projects may need different versions, and a global install is invisible to teammates. Keep tools in devDependencies and run them through scripts.

Drills

Answer fast — trust the rule.

quick drill

A linter only checks your code while you work. How should you install it?

quick drill

A teammate has just cloned the project. Which command installs everything listed in package.json?

quick drill

package.json has "scripts": { "build": "vite build" }. How do you run it?

quick drill

Should node_modules be committed to Git?

Remember

  • package.json lists what the project needs; the package manager fetches it.
  • Needed by visitors: dependency. Only needed while building: -D.
  • Trap: never commit node_modules.

Practice — level up

0/1 solved

Write your answer, then compare it with a rubric and a model answer.

ExplainSetting up the project

Explain how you would set up the bakery project with npm so that it uses a date picker on the order form and Vite as a build tool, and how a new teammate gets a working copy.