Stop 17 · Build ToolsTopics · 4/9

Babel

In short

You write modern JavaScript, JSX and maybe TypeScript. Some browsers and tools don't understand all of that. Babel rewrites your code into a version they can run.

A JavaScript compiler that transforms modern syntax (and JSX/TypeScript) into a version compatible with older browsers or environments.

The jaadu stands between a cousin with headphones and a smiling grandmother, translating between them.

Think of it like this

A translator at a family function

Your cousin from abroad speaks fast slang. Dadi understands only simple Hindi. A translator in between keeps the meaning but changes the words. Babel does that for code: same logic, older syntax that more browsers follow.

Watch it happen

How Babel rewrites a file

Source

Parse

Transform

Generate

Output

1/5You write const name = user?.name ?? "Guest"; in a .tsx file.

The big ideas

What you need to know

Compiler, not bundler

Babel changes code file by file. Joining files into bundles is a separate job for tools like Webpack.

Presets are bundles of rules

@babel/preset-env handles modern JS, preset-react handles JSX and preset-typescript strips TypeScript types.

Targets decide the output

Tell Babel which browsers you support (often through a browserslist entry) and it only converts what those browsers lack.

Syntax vs new features

Babel rewrites syntax like ?. and arrow functions. Missing built-ins like Array.prototype.at need polyfills, usually from core-js.

See it in code

Walk through the code

json

1{2  "presets": [3    ["@babel/preset-env", { "targets": "> 0.5%, not dead" }],4    ["@babel/preset-react", { "runtime": "automatic" }],5    "@babel/preset-typescript"6  ]7}

1/3preset-env converts modern syntax only for browsers above 0.5% usage that are still maintained.

This is a babel.config.json. Presets run in reverse order, so TypeScript is stripped first, then JSX is converted, then modern syntax is adjusted for your target browsers.

Save yourself the pain

Common mistakes

Oops

Thinking preset-typescript checks your types.

Do this instead

It only removes the types. Run tsc --noEmit separately, for example in CI, to catch type errors.

Oops

Assuming Babel makes every new feature work in old browsers.

Do this instead

Babel converts syntax. For missing functions and objects, add polyfills with core-js or drop support for very old browsers.

Your mission

See Babel's translation

~15 min

Quick check

Your Babel build runs fine, but users on an old browser get "replaceAll is not a function". Why?

Go deeper

1Paste some modern JS into the Babel REPL and see the compiled output.
2Learn what a Babel 'preset' (like `@babel/preset-react`) actually does.
3Understand how Babel differs from a bundler — it transforms code, it doesn't bundle files.