Professional Workflow›Extra· 40 min read

Modern Tooling: npm, Vite & Babel

Real projects are not single HTML files — they are built. Meet the everyday tools that install code, bundle your files and let you use modern JavaScript everywhere: npm, a bundler like Vite, and Babel.

What you will learn

Install and use a package with npm
Explain what a bundler like Vite does
Understand why Babel transpiles modern JS

Why a single file is not enough

Until now your JavaScript has lived in a <script> tag in one HTML file. That is perfect for learning. But real applications are made of many files, use code written by other people, and rely on modern syntax that older browsers do not understand. To manage all that, professional projects are built using a few standard tools. This lesson is a map of those tools so they feel familiar when you meet them for real in the React and Node tracks.

Note: The commands below run in a terminal (the command line), not in the browser — that is why these blocks show an "Output" instead of a live preview. You will run them for real in the later tracks.

npm — the package installer

npm (Node Package Manager) is a tool that downloads and manages code written by other people (called packages). Need a date library, a charting tool, React itself? You install it with npm instead of copying files by hand. npm comes bundled with Node.js.

A project starts by creating a package.json — a small file that records your project’s details and its list of installed packages (its dependencies). You create it with one command:

Start a project and install a package

# In your project folder, in the terminal:
npm init -y

# Then install a package (example: the date library "dayjs")
npm install dayjs

Step by step:

npm init -y creates a package.json file (the -y accepts all the defaults).
npm install dayjs downloads the dayjs package into a node_modules folder and records it under "dependencies" in package.json.
Now any file in your project can import and use that package.
Anyone who copies your project can run a single npm install to fetch all the recorded packages at once — no manual downloading.

Note: Output (after the commands): - A package.json file appears, listing dayjs under "dependencies". - A node_modules folder appears, containing dayjs and anything it needs. - You can now write: import dayjs from "dayjs"; in your code.

Tip: You will see two folders/files everywhere in real projects: package.json (the human-readable list of what you use) and node_modules (the actual downloaded code — never edit it, and never commit it to Git; npm install rebuilds it).

A bundler (Vite) — combine many files into a fast build

When your app is split across dozens of files and imports many packages, the browser would have to fetch each one separately — slow and messy. A bundler solves this: it follows all your import statements, combines your code and its packages into a few optimised files, and serves them efficiently. Vite is the modern, popular bundler and dev-server (it is what the React track uses).

A bundler gives you two superpowers during development:

A dev server with hot reload — save a file and the browser updates instantly, no manual refresh.
A production build — one command (npm run build) crunches everything into small, fast files ready to deploy.

Spin up a modern project with Vite

# Create a new project with Vite, then start the dev server
npm create vite@latest my-app
cd my-app
npm install
npm run dev        # starts a live dev server with hot reload

npm create vite@latest my-app scaffolds a ready-to-go project folder. npm install fetches its packages. npm run dev starts a local server (usually at http://localhost:5173) that rebuilds and refreshes the page the instant you save — the everyday development loop in modern front-end work.

Note: Output: The terminal prints a local URL like: ➜ Local: http://localhost:5173/ Open it, edit a file, save — the page updates instantly (hot reload).

Babel — modern JavaScript everywhere

JavaScript gains new syntax every year, but not every browser (especially older ones) understands the newest features. Babel is a transpiler: it translates modern JavaScript into an older, widely-supported version that runs everywhere — automatically, as part of the build. ("Transpile" = translate code from one version of a language to another.)

You rarely configure Babel by hand today — bundlers like Vite handle this step for you behind the scenes. The point to remember: it is why you can write the latest, cleanest syntax and still have it work in browsers that do not natively support it yet.

Tool	Job	Plain-words role
npm	Install & manage packages	Downloads other people’s code
Bundler (Vite)	Combine & optimise files	Glues your files into a fast build + live dev server
Babel	Transpile modern → older JS	Makes new syntax run in old browsers

Tip: You do not need to master configuration now. The goal is recognition: when the React and Node tracks say "run npm install" or "Vite will hot-reload", you will know exactly what is happening and why.

Q. What is the main job of a bundler like Vite?

Answer: A bundler follows your imports and combines your code and packages into optimised files, and (in dev) serves them with hot reload. Downloading packages is npm’s job; translating modern syntax to older JS is Babel’s job.

✍️ Practice

On paper, list what npm init -y and npm install each create in a project folder.
Explain in one sentence each what npm, a bundler, and Babel do.

🏠 Homework

If you have Node installed, create a Vite project (npm create vite@latest), run npm install and npm run dev, and confirm hot reload by editing a file. If not, write the steps you would run.