PY
JS

Python to JavaScript

11 lessons

Progress0%
1Variables and Constants2Functions and Closures3Lists vs Arrays4Dicts vs Objects and Map5Classes and Prototypes6Modules and Imports7Async Programming8DOM and Browser APIs9Type Hints vs TypeScript10Error Handling11Build Tools and npm
All Mirror Courses
PY
JS
Build Tools and npm
MirrorLesson 11 of 11
Lesson 11

Build Tools and npm

npm/package.json vs pip/requirements.txt — dependency management and project setup

Introduction

In this lesson, you'll learn about build tools and npm in JavaScript. Coming from Python, you already have a foundation for understanding this concept. We'll build on that knowledge while highlighting the key differences.

Mirror Card
PY
From Python:

In Python, you're familiar with npm/package.json vs pip/requirements.txt — dependency management and project setup.

JS
In JavaScript:

JavaScript has its own approach to npm/package.json vs pip/requirements.txt — dependency management and project setup, which we'll explore step by step.

The JavaScript Way

Let's see how JavaScript handles this concept. Here's a typical example:

JS
JavaScript Example
// package.json — npm's equivalent of pyproject.toml
{
  "name": "my-app",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "start":  "node src/index.js",
    "dev":    "nodemon src/index.js",
    "test":   "vitest",
    "build":  "tsc",
    "lint":   "eslint ."
  },
  "dependencies": {
    "express": "^4.18.0",
    "axios":   "^1.6.0"
  },
  "devDependencies": {
    "vitest":  "^1.0.0",
    "eslint":  "^8.0.0",
    "typescript": "^5.0.0"
  }
}

// npm commands (like pip commands)
// npm install            — install all deps (like pip install -r)
// npm install express    — add a dependency
// npm install -D vitest  — add dev dependency
// npm run start          — run script
// npm test               — run tests
// npx tsc                — run TypeScript compiler

Comparing to Python

Here's how you might have written similar code in Python:

PY
Python (What you know)
# Create virtual environment
python -m venv venv
source venv/bin/activate    # macOS/Linux
# venv\Scripts\activate     # Windows

# Install packages
pip install requests flask pytest

# Save dependencies
pip freeze > requirements.txt

# Install from requirements
pip install -r requirements.txt

# requirements.txt looks like:
# flask==3.0.0
# requests==2.31.0
# pytest==7.4.0

# Modern: pyproject.toml (PEP 517/518)
# [project]
# name = "my-app"
# dependencies = ["flask>=3.0", "requests"]
# [project.optional-dependencies]
# dev = ["pytest", "black"]

# Run
python src/main.py
python -m pytest
Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

package.json = pyproject.toml + requirements.txt combined

Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

npm installs to node_modules/ (committed via package-lock.json); pip installs to venv/

Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

scripts section in package.json replaces Makefile-style commands

Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

devDependencies = Python optional-dependencies dev group

Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

npm workspaces = monorepo support (no pip equivalent)

Step-by-Step Breakdown

1. Project Initialization

npm init creates package.json. Unlike Python's virtualenv, npm automatically creates node_modules in the project directory.

PY
Python
python -m venv venv && pip install flask
JS
JavaScript
npm init -y           # create package.json
npm install express   # installs to node_modules/

2. Dependency Categories

npm splits deps into regular and dev. Regular deps ship with the app; devDependencies only used during development.

PY
Python
# requirements.txt — no distinction
# pyproject.toml — [project.optional-dependencies] dev
JS
JavaScript
npm install express          # → dependencies
npm install -D vitest        # → devDependencies
npm install                  # installs both

3. npm Scripts

npm scripts replace Makefile targets or shell scripts. 'npm run <script>' runs them; 'test' and 'start' are shortcuts.

PY
Python
# Makefile or just: python -m pytest
JS
JavaScript
// package.json scripts:
"test": "vitest",
"lint": "eslint . --fix",
// Run:
npm test
npm run lint

4. Lock Files

package-lock.json pins exact dependency versions — like pip freeze > requirements.txt but auto-generated. Always commit it.

PY
Python
pip freeze > requirements.txt  # manual
JS
JavaScript
// package-lock.json — auto-generated by npm
// Commit it! It ensures reproducible installs
// npm ci (not npm install) for exact lock file installs in CI
Rule of Thumb
Always commit package-lock.json. Use 'npm ci' in CI/CD for reproducible builds.

Common Mistakes

When coming from Python, developers often make these mistakes:

  • package.json = pyproject.toml + requirements.txt combined
  • npm installs to node_modules/ (committed via package-lock.json); pip installs to venv/
  • scripts section in package.json replaces Makefile-style commands
Common Pitfall
Don't assume JavaScript works exactly like Python. While the concepts may be similar, the syntax and behavior can differ significantly.

Key Takeaways

  • package.json = pyproject.toml + setup.py; node_modules = venv
  • dependencies for production, devDependencies for dev tools
  • scripts section replaces Makefile; npm run <script> to execute
  • package-lock.json is the lockfile — commit it; use npm ci in CI
Rule of Thumb
The best way to learn is by doing. Try rewriting some of your Python code in JavaScript to practice these concepts.
PreviousFinish