0Pricing
Frontend Academy · Lesson

npm and package.json: dependencies scripts

Initialise a project with npm init, add runtime and dev dependencies, write reusable npm scripts, and understand semver.

npm and package.json: dependencies scripts is a free Frontend Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is npm?

npm (Node Package Manager) manages project dependencies and scripts. It reads package.json to know what to install, and writes package-lock.json to record exact versions. Over two million packages are published on the npm registry.

Initialising a Project

npm init -y creates a package.json with default values. The -y flag accepts all defaults without prompts.

mkdir my-project && cd my-project
npm init -y
# Creates package.json

The package.json File

Key fields: name, version, description, main (entry point), scripts, dependencies, devDependencies.

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.3.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

Installing Packages

npm install package adds to dependencies. npm install -D package adds to devDependencies (not needed in production). npm install without arguments installs everything in package.json.

npm install react react-dom      # production dep
npm install -D vite jest eslint  # dev deps only
npm install                      # install all from package.json

Semantic Versioning

npm uses semver: major.minor.patch. The ^ prefix allows compatible updates (same major). The ~ prefix allows patch updates only. Exact versions have no prefix.

"react": "^18.3.0"  // 18.3.0 to < 19.0.0 (compatible)
"lodash": "~4.17.21" // 4.17.21 to < 4.18.0 (patch only)
"fixed": "1.2.3"     // exactly 1.2.3

npm Scripts

Define commands in the scripts field. Run with npm run scriptname. Built-in scripts (test, start) run with npm test or npm start directly.

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
  "test": "jest --coverage",
  "lint": "eslint src",
  "typecheck": "tsc --noEmit"
}

npm run vs npx

npm run runs a script from package.json. npx executes a package from node_modules or downloads and runs it temporarily — useful for one-off commands like npx create-vite@latest.

package-lock.json

package-lock.json records the exact version of every installed package (and their transitive deps). Commit it to ensure all developers and CI use identical versions. Never edit it manually.

node_modules and .gitignore

Never commit node_modules — it can be hundreds of MB. Always add it to .gitignore. Anyone can restore it with npm install.

# .gitignore
node_modules/

Updating and Removing Packages

npm update updates packages within their semver range. npm outdated shows what can be updated. npm uninstall package removes a package.

npm outdated                # show outdated packages
npm update react             # update to latest compatible
npm uninstall lodash         # remove package

npm vs yarn vs pnpm

Alternatives to npm: yarn (faster, workspaces, Plug'n'Play), pnpm (disk-efficient symlink store, strict dependencies, fastest for monorepos). The core commands are similar across all three.

# pnpm equivalents:
pnpm install
pnpm add react
pnpm add -D vite
pnpm run dev

Quick Check

What does the -D flag do when running npm install -D jest?

Recap: npm and package.json

npm init creates package.json. npm install adds dependencies. -D for devDependencies. ^ in semver means compatible updates. Scripts run commands with npm run. package-lock.json records exact versions — commit it. node_modules goes in .gitignore. npx runs one-off package commands.

Frequently asked questions

Is the “npm and package.json: dependencies scripts” lesson free?

Yes — the full text of “npm and package.json: dependencies scripts” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “npm and package.json: dependencies scripts”?

Initialise a project with npm init, add runtime and dev dependencies, write reusable npm scripts, and understand semver. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “npm and package.json: dependencies scripts” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. ES Modules: import export and dynamic import
  2. npm and package.json: dependencies scripts
  3. Vite: dev server and build
  4. Bundling Concepts: tree shaking code splitting
← Back to Frontend Academy