Babel
- Pronunciation
- BAY-bul
In short
Babel is a JavaScript compiler that rewrites modern JavaScript, JSX and TypeScript syntax into code that older browsers and runtimes can run.
What is Babel?
Babel is a transpiler: a tool that turns source code into other source code at the same level. It reads your JavaScript, parses it into a syntax tree, lets plugins transform that tree and prints new code. It started in 2014 as 6to5, a tool that let developers write the then-new ES6 syntax and still run it in older browsers, and was renamed Babel in 2015.
Each transformation is a plugin, and presets bundle many of them. @babel/preset-env compiles only the syntax your target browsers lack, based on a Browserslist query such as > 0.5%, not dead; @babel/preset-react turns JSX into function calls; and @babel/preset-typescript strips type annotations. Plugins can also do custom work, such as removing debug code or adding test coverage counters, and the React Compiler, which adds memoization automatically, ships as a Babel plugin.
Babel 8, released in June 2026 after eight years of Babel 7, is published only as ES modules, needs Node.js 22 or later, and by default targets Browserslist's defaults query instead of compiling everything down to ES5. Over the same years, much of Babel's everyday work moved to faster tools written in Go and Rust, such as esbuild, SWC and Oxc, which Next.js and Vite use by default; Babel remains common where its plugins are needed.
Babel is often confused with a bundler and with a polyfill. A bundler such as webpack combines many files into a few and can run Babel on each one through babel-loader; Babel itself transforms one file at a time. Babel rewrites syntax, such as optional chaining or classes, but can't add missing built-in functions such as Array.prototype.at; those come from polyfills, for example core-js, which a separate Babel plugin can insert where needed. It also strips TypeScript types without checking them, so projects still run tsc to catch type errors.
Key takeaways
- Babel is a JavaScript transpiler that rewrites new syntax into older syntax.
- Plugins do each transformation; presets such as
@babel/preset-envbundle them. - It also compiles JSX and strips TypeScript types, without type-checking.
- Babel 8 (2026) is ESM-only and targets modern browsers by default.
- Faster tools such as SWC and esbuild now handle many builds; Babel stays where its plugins are needed.
Example
{
"presets": [
["@babel/preset-env", { "targets": "> 0.5%, not dead" }],
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": ["babel-plugin-react-compiler"]
}Readers ask
Is Babel still needed?
Less than before. Modern browsers support almost all current syntax, and faster tools such as SWC, esbuild and Oxc handle TypeScript and JSX in most new projects. Babel is still used where a specific plugin is needed, such as the React Compiler, and in older build setups.
What is the difference between Babel and the TypeScript compiler?
Both can turn TypeScript into JavaScript. tsc also checks types, while Babel only removes them, quickly and one file at a time; many projects let a fast tool compile the code and run tsc --noEmit only for checking.
What does @babel/preset-env do?
It looks at the browsers or Node.js versions you target and applies only the transformations they need, so code for modern browsers stays close to what you wrote.
See also
- TranspilerWeb Development, p. 58A transpiler is a tool that translates source code from one language or language version into another at a similar level, such as TypeScript into JavaScript.
- PolyfillWeb Development, p. 40A polyfill is code that adds a modern web feature to older browsers that lack it, so developers can use the standard API everywhere without special cases.
- JSXWeb Development, p. 31JSX is a JavaScript syntax extension for writing HTML-like markup inside code, used mainly with React to describe what the user interface should look like.
- BundlerWeb Development, p. 7A bundler is a build tool that combines JavaScript modules and their dependencies into a few optimized files that browsers can download and run quickly.
- TypeScriptWeb Development, p. 60TypeScript is a programming language built on JavaScript that adds static types, catching many bugs before the code runs, and compiles to plain JavaScript.
- WebpackWeb Development, p. 70Webpack is a module bundler that follows an app's imports and combines its JavaScript, CSS, images and other files into optimized bundles for the browser.
Sources
Spotted a mistake or something missing on this page?Suggest an edit