npm, Tooling & Bundlers — JavaScript Course

What you'll learn

Tooling should make the development contract repeatable: dependency versions, scripts, transforms, checks, and production output must be understandable to every contributor and CI.

By the end of this lesson, you'll be able to:

Explain package manifests and lockfiles
Configure repeatable scripts
Understand bundling, tree shaking, and compatibility transforms

Core mental model

Use this decision table as a compact reference. Focus on what each tool means and when it earns its place in production code.

Concept	What it means	Decision rule
package.json	Project metadata, scripts, and declared dependency ranges	Keep commands discoverable behind scripts
Lockfile	Exact resolved dependency graph	Commit it for applications
Bundler	Builds optimized asset graphs	Use when modules, assets, compatibility, or splitting require it

Professional workflow

Build the behavior in small, observable steps. Each step should leave something you can inspect or test.

Describe the build and dependency pipeline boundary: inputs, outputs, state, timing, and expected failures.
Implement the smallest correct path with names that expose intent.
Add edge cases and failure handling before introducing abstractions.
Verify behavior with realistic data and one deliberately adversarial example.
Refactor only after the observable behavior is protected.

Make behavior observable

Before optimizing or abstracting, make inputs, outputs, state changes, timing, and failure paths visible. JavaScript becomes much easier to reason about when hidden work is exposed.

Guided code lab

Define a small project contract

Scripts give humans and CI the same supported entry points.

package.json

{
  "name": "course-dashboard",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "vitest run",
    "check": "eslint ."
  }
}

Import only the public API

Static ESM gives bundlers the information needed for tree shaking and chunking.

main.js

import { createDashboard } from "./dashboard.js";
import "./styles.css";

createDashboard(document.querySelector("#app"));

Production practice

Contract

Document the build and dependency pipeline inputs, completion signal, failure channel, ordering, and cancellation behavior.

Verification

Test success, expected failure, timeout or cancellation, empty data, and out-of-order completion.

Operations

Expose duration and failure context without logging secrets or overwhelming the main thread.

Common failure mode

Running a broad dependency update without reviewing the lockfile and tests can silently change hundreds of transitive packages.

Independent workshop

Turn a multi-file browser exercise into a Vite project with automated checks.

Your finished workshop must include:

Committed lockfile
dev/build/test/check scripts
A documented production output and browser target

Definition of done

Demonstrate the happy path and at least two edge cases, keep responsibilities separated, and add a short note explaining one design choice.

Recap & quick check

Key takeaways

Manifests declare intent
Lockfiles pin resolution
Scripts standardize workflows
Bundlers optimize a static module graph

Quick check

1. What records exact resolved package versions?

2. What enables tree shaking most directly?

3. Where should repeatable commands live?

Keep the workshop. Later modules deliberately build on these decisions, so each exercise can become part of your final portfolio architecture.