1. What is npm?
Originally meant Node Package Manager, but now it's the standard tool to install and manage JavaScript packages for frontend and backend.
Think of npm as two things:
- A command-line tool (npm commands)
- An online package repository (npm registry)
It lets you search, install, update, and manage JS libraries easily.
Why important? Most modern JS projects rely on npm to manage dependencies.
2. Setting Up Your Project: npm init
Run npm init inside your project folder to create a package.json.
It asks simple questions:
- Project name (unique identifier)
- Version (follow Semantic Versioning, e.g., 1.0.0)
- Description (what your project does)
- Entry file (default is index.js, the main file to run)
- Test command (e.g., jest to run tests)
- GitHub repository URL (optional)
- Keywords (helps with searchability)
- Author (your name)
- License (like MIT, GPL, or private)
After answering, npm creates a package.json file — the project’s configuration file.
3. What is a Dependency?
A dependency is a package your project needs to work.
Examples:
- React (UI library)
- Axios (HTTP client)
- Parcel (bundler)
Install with:
npm install react
This downloads the package into node_modules/ and adds it to your package.json.
4. node_modules/: What and Why?
This folder contains all your installed packages and their dependencies.
Do not push node_modules/ to GitHub!
It can be regenerated anytime with npm install.
Add this to your .gitignore file:
node_modules/
5. Dependencies vs Dev Dependencies vs Peer Dependencies
| Type | Purpose | Example |
|---|---|---|
| dependencies | Needed to run the app in production | react, axios |
| devDependencies | Needed only during development | parcel, jest |
| peerDependencies | Packages your library expects users to have installed | React (in plugins) |
Install a dev dependency with:
npm install parcel -D
or
npm install parcel --save-dev
6. package-lock.json: Your Version Guardian
- Automatically generated when you install packages.
- Locks down exact versions of all dependencies and sub-dependencies.
- Ensures everyone uses the same package versions — avoids “it works on my machine” problems.
- Always commit this file to your repo.
7. Semantic Versioning (SemVer) – ^ vs ~
| Specifier | What it allows |
|---|---|
| ~1.2.3 | Updates only patch versions (1.2.x) |
| ^1.2.3 | Updates minor and patch versions (1.x.x) |
- Use
~for maximum stability (bug fixes only). - Use
^for more updates (minor features and patches).
8. The Dependency Tree
Packages often depend on other packages, which in turn depend on more.
This creates a nested tree structure of dependencies.
Installing one package might install dozens under the hood.
9. What Is a Bundler?
A bundler combines your many files (HTML, CSS, JS) into optimized bundles for production.
Helps with:
- Combining files
- Minifying code
- Handling assets (images, fonts)
Popular bundlers:
- Webpack (used by Create React App)
- Parcel (zero-config, easy for beginners)
- Vite (fast and modern)
10. Meet Parcel – The Zero-Config Bundler
Parcel automatically handles bundling, asset management, and even runs a development server with live reload.
No config files needed—great for beginners.
11. Installing Parcel
npm install parcel -D
Added as a devDependency because it’s only needed during development.
12. Running Your App: npx parcel index.html
npx runs executables from node_modules/.bin without globally installing them.
This command starts a development server and opens your app in the browser with auto-reload.
13. Building for Production: npx parcel build index.html
Creates optimized, minified files inside the dist/ folder, ready for deployment.
14. Auto-Generated Folders to .gitignore
Always add these to .gitignore to keep your repo clean:
node_modules/
.parcel-cache/
dist/
- Why Not Use CDN for React?
Old way:
<script src="https://unpkg.com/react"></script>
Modern way:
npm install react react-dom
Modern way:
npm install react react-dom
import React from "react";
import ReactDOM from "react-dom";
Using npm packages gives you better control, versioning, and consistency.
- Module Systems: CommonJS vs ES Modules Type Syntax Usage CommonJS require(), module.exports Node.js ES Modules import, export Modern JS (browsers + bundlers)
To use ES Modules in browsers:
- Babel: Transpiling Modern JS for Older Browsers
Babel converts modern JavaScript into backward-compatible code for older browsers.
Parcel uses Babel automatically as needed.
- browserslist: Define Browser Support
Add this in package.json to tell tools which browsers to support:
"browserslist": [
"last 2 versions",
"> 0.25%",
"not dead"
]
Helps avoid unnecessary polyfills and keeps code optimized.
- npm Scripts (Automating Tasks)
In package.json:
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html",
"test": "jest"
}
Run scripts with:
npm run start
npm run build
npm test
You can chain commands too:
"lint-and-test": "npm run lint && npm test"
- npx vs. npm: What’s the Difference? Command What it does npm Installs/manages packages, updates package.json npx Runs packages without installing globally (one-time use)
npx tries local packages first; if not found, downloads and runs temporarily.
- Security & Maintenance Tips
Run npm audit to find security issues.
Use npm audit fix to fix simple problems automatically.
Regularly update dependencies and check package sources.
- Common npm Commands Summary Command Purpose npm install Installs all dependencies npm install Installs specific package npm install -g Installs package globally npm uninstall Removes a package npm outdated Lists outdated packages npm ls Shows dependency tree npm init -y Creates package.json with defaults npm update Updates packages within allowed versions npm audit / npm audit fix Checks/fixes security issues
- Interview-Focused Recap
npm: JavaScript package manager.
package.json: Project metadata and config.
package-lock.json: Locks exact package versions.
SemVer (^ vs ~): Controls allowed updates.
dependencies vs devDependencies: Production vs development packages.
Bundler: Combines & optimizes code for browsers.
Parcel: Zero-config bundler, great for beginners.
npx: Runs tools without global installs.
Babel & browserslist: Ensure compatibility with older browsers.
npm scripts: Automate tasks easily.
Security: Use npm audit to keep safe.
Write a detailed and beginner-friendly set of notes about npm, Node.js project setup, dependencies, bundlers (like Parcel), package.json, and related tools based on the following concepts. Explain everything in depth with clear examples and structure. Make sure it’s suitable for interview preparation, with all missing important concepts also included. Cover all key terms like:
What is npm?
History and meaning of npm (is it really "Node Package Manager"?)
Setting up npm in a project (npm init)
What is package.json? What does it contain?
What are dependencies and devDependencies?
What are bundlers? (Webpack, Parcel, Vite)
What does a bundler do?
What is Parcel and how to install it (npm install -D parcel)
Difference between dependency vs devDependency
What is npx?
What is package-lock.json and why is it important?
What is the node_modules folder? Should it be pushed to GitHub?
What is a dependency tree?
What is .gitignore and what should be included in it (node_modules, dist, etc.)?
What is npx parcel index.html and what does it do?
What is the dist folder and what does it contain?
Parcel cache and why we ignore it in Git
How to install and use React via npm (not CDN)
What does import React from 'react' mean and how it works?
CommonJS vs ES Modules (<script type="module">)
Parcel build process (parcel build)
What is Browserlist and why it's important in frontend projects?
🔍 Also include:
Any missing key concepts or best practices
Clear structure (headings, subheadings, bullet points, examples)
Real-world explanations
Interview-level questions with answers at the end
Top comments (0)