Client-Side Tooling · 3 of 8

Transpilers

Translate modern, typed, JSX-laden source into the boring JavaScript every browser understands. Babel made the modern web possible — and now Rust-based successors are 30× faster.

BabelTypeScriptSWCesbuildSource Maps
← Back to Client Side
Quick Facts

At a Glance

Basic Concepts

  • Transpiler = source-to-source compiler. Modern JS / TS / JSX in, older browser-friendly JS out.
  • Polyfill = runtime shim for missing APIs (e.g. Array.flat on older browsers).
  • browserslist defines your support targets — drives which transforms & polyfills are included.
  • Type stripping: TypeScript & JSX are usually erased at build time, never reach the browser.
  • Source maps let you debug original source even after transformation.
Landscape

The Major Transpilers

ToolBuilt inUse
BabelJavaScriptThe original; biggest plugin ecosystem; still default in many older codebases.
TypeScript Compiler (tsc)TypeScriptType checking + emission. Slower than alternatives — most teams type-check with tsc and emit with another tool.
SWCRust20–70× faster than Babel; powers Next.js, Parcel, Deno, Vercel.
esbuildGoEven faster; primarily a bundler but excellent transpiler.
SucraseJavaScript20× faster than Babel for the common subset; dev-mode transforms.
OXC / RolldownRustVoidzero's next-gen toolchain — Rust everything.
Mechanics

How Transpilers Work

The Three Stages
  1. Parse: source text → AST (abstract syntax tree).
  2. Transform: walk the AST, apply transforms (strip types, lower JSX, downcompile ?., etc.).
  3. Generate: AST → target JS, plus a source map.
Type Checking vs Type Stripping

An important distinction in modern TypeScript pipelines:

  • Stripping types (esbuild, SWC, Sucrase): drop : string annotations, rewrite enums, emit JS. Doesn't validate types — fast.
  • Type checking (tsc, with --noEmit): walks the program, verifies every type. Slow but catches bugs.
  • Modern setup: type-check with tsc --noEmit in CI; emit with esbuild/SWC at build time.
Polyfills & browserslist

Define your target browsers in package.json:

{
  "browserslist": [
    "> 0.5%",
    "last 2 versions",
    "not dead"
  ]
}

Babel + core-js auto-inject only the polyfills your targets need. Modern apps targeting only evergreen browsers can usually skip polyfills entirely.

JSX Transforms

JSX is just sugar — <div /> compiles to React.createElement('div') (classic) or the newer jsx() runtime (since React 17). The new transform doesn't require import React at the top of every file.

Why Speed Matters Now

On a large codebase, Babel can spend 30+ seconds in a clean build. SWC drops the same job to 1–2 seconds. esbuild often under a second. The downstream effect — sub-second HMR, instant CI — has reshaped how frontends are built.

Picking

Which to Choose

Modern Project

SWC (often automatic via Vite / Next.js).

Library Author

tsup or unbuild (esbuild-powered) for fast dual-format publish.

Need Custom Transforms

Babel — the plugin ecosystem is unmatched.

Type Safety

tsc with --noEmit in CI alongside whatever you ship with.

Continue

Other Client-Side Tooling