The language moves forward every year, the browsers installed on visitors' machines far more slowly. Writing modern code and serving it to everyone therefore calls for a translator in between.
Babel has held that post since new language features started arriving faster than their adoption.
Definition
Babel is a Transpilation tool: it reads JavaScript, represents it as a tree, applies a series of transformations, then writes out an equivalent JavaScript file that older engines accept.
// babel.config.json
{
"presets": [
["@babel/preset-env", { "targets": "> 0.5%, last 2 versions, not dead" }]
]
}
// Input
const greet = (name = "world") => "Hello " + name + "!";
// Possible output for an old target
var greet = function greet(name) {
if (name === undefined) name = "world";
return "Hello " + name + "!";
};The targets field decides everything. It describes the browsers to serve, and Babel applies only the transformations they actually require: aiming wide produces longer code, aiming recent transforms almost nothing.
What Babel translates, and what it does not
This distinction is the most frequent source of confusion around the tool.
- Syntax, yes: a Arrow function, a Destructuring, a Template literal or Optional chaining (?.) are rewritten into older constructs.
- Missing methods, no: if the target engine has never heard of
Array.prototype.at, no syntax rewrite will invent it. That calls for a Polyfill, which Babel can inject on demand. - Types, erased: the TypeScript preset strips annotations without checking anything. Checking remains the job of the TypeScript compiler.
Babel also serves outside compatibility work: it is what turns React's JSX into ordinary function calls. A modern project sometimes uses it for that reason alone.
Its place in a project
Babel is rarely invoked by hand. It slots into a Bundler, as a loader under Webpack or a plugin elsewhere, and the configuration file stays the only point of contact.
Tools written in compiled languages now fill the same role far faster, and several build chains use them by default. Babel keeps the edge on unusual cases, thanks to a plugin ecosystem nobody has caught up with.
Frequently asked questions
Is Babel still necessary?
Less than it used to be. Up-to-date browsers understand almost all of the modern language, and an application aimed at a recent audience can go without. It becomes essential again as soon as an old browser appears among the targets, or a syntax that is not yet standardized is used.
Why does my transpiled code still break?
Because the error is about a method, not about syntax. A message of the "is not a function" kind on an older browser almost always names a method missing from the engine, so a forgotten polyfill. Read the name quoted in the error before touching the configuration.
How does it differ from the TypeScript compiler?
Both can emit older JavaScript, but only one checks types. Babel merely removes the annotations, which is very fast and lets typing errors through; the official compiler reports them. Many projects combine the two, one for checking, the other for output.