The gap between source code and browsers

Here is code you might write in a modern React project:

// TypeScript with JSX - perfectly readable to you
import { useState } from 'react';
import { Button } from './components/Button';
import styles from './App.module.css';

const App = (): JSX.Element => {
  const [count, setCount] = useState<number>(0);
  return (
    <div className={styles.container}>
      <Button onClick={() => setCount(c => c + 1)}>{count}</Button>
    </div>
  );
};

A browser cannot run this. It does not know what TypeScript type annotations are. It cannot parse <Button /> JSXWhat is jsx?A syntax that lets you write HTML-like markup inside JavaScript, which React converts into actual DOM elements. Ask AI for more syntax. It cannot import .css files as JavaScript modules. Every one of these features requires a build step to translate it into browser-compatible code.

The four jobs of a build tool

1. TranspilingWhat is transpiling?Converting code written in one syntax (like TypeScript or JSX) into equivalent code that browsers can actually run (plain JavaScript). Ask AI for more

Transpiling converts syntax browsers do not support into equivalent code they do. TypeScript types get stripped. JSXWhat is jsx?A syntax that lets you write HTML-like markup inside JavaScript, which React converts into actual DOM elements. Ask AI for more becomes function calls. Modern JavaScript features get downleveled for older browsers.

// What you write (TypeScript + JSX)
const Greeting = ({ name }: { name: string }) => {
  return <h1>Hello, {name ?? 'World'}</h1>;
};

// What the browser receives after transpilation
const Greeting = ({ name }) => {
  return React.createElement('h1', null, 'Hello, ', name != null ? name : 'World');
};

The logic is identical, only the syntax changed. Types are removed, JSX becomes createElement calls, and the nullish coalescingWhat is nullish coalescing?The ?? operator that provides a fallback value only when the left side is null or undefined, unlike || which also replaces 0, empty strings, and false. Ask AI for more operator (??) is converted to a ternary.

2. Bundling

Your project might have 300+ source files, each importing from others and from node_modules. Bundling traces all those imports and merges everything into a small set of output files.

Source (300+ files)              Output (3-4 files)
───────────────────              ──────────────────
src/main.tsx              →      dist/main.a1b2c3.js
src/components/*.tsx      →      dist/vendor.d4e5f6.js
src/utils/*.ts            →      dist/styles.g7h8i9.css
node_modules/react/       →
node_modules/react-dom/   →

Fewer files means fewer HTTPWhat is http?The protocol browsers and servers use to exchange web pages, API data, and other resources, defining how requests and responses are formatted. Ask AI for more requests, which means faster page loads for your users.

3. MinificationWhat is minification?Shrinking JavaScript and CSS files by removing whitespace, shortening variable names, and stripping comments so they download faster. Ask AI for more

Minification makes files as small as possible by removing everything that does not affect execution: comments, whitespace, long variable names.

// Before minification: 147 bytes
function calculateDiscount(originalPrice, discountPercent) {
  const discount = originalPrice * (discountPercent / 100);
  return originalPrice - discount;
}

// After minification: 65 bytes (56% smaller)
function c(o,d){return o-o*(d/100)}

The behavior is identical. Only the byte count changed.

4. Asset processing

Build tools handle more than JavaScript. They optimize images, hash filenames for cache busting, compile CSS preprocessors (Sass, PostCSS), and inline small assets directly into the bundleWhat is bundle?A single JavaScript file (or set of files) that a build tool creates by combining all your source code and its imports together. Ask AI for more when it is more efficient.

The full build pipelineWhat is pipeline?A sequence of automated steps (install, lint, test, build, deploy) that code passes through before reaching production. Ask AI for more

Your Code              Build Tool                Browser
─────────              ──────────                ───────
TypeScript      →      Strip types        →      JavaScript
JSX             →      createElement()    →      Function calls
ES Modules      →      Bundle             →      Single file(s)
Modern JS       →      Transpile          →      Older syntax
Large files     →      Minify             →      Tiny files
CSS Modules     →      Scope + extract    →      Single CSS file

Choosing a build tool

Several build tools exist in the JavaScript ecosystem. Here is how they compare:

Vite has become the default choice for new projects. It uses esbuild for fast development transforms and Rollup for optimized production bundles, giving you the best of both.

What happens without build tools

Build tools are not optional for anything beyond a single HTML file with vanilla JavaScript. Every modern framework requires them.

Quick reference