Babel Cheat Sheet

Covers Babel configuration files, presets and plugins, browserslist targets, polyfills, and CLI commands for transpiling modern JavaScript.

2 PagesIntermediateMar 10, 2026

babel.config.js

Project-wide presets and plugins.

javascript

// babel.config.jsmodule.exports = {  presets: [    ['@babel/preset-env', { targets: '> 0.25%, not dead' }],    '@babel/preset-react',    '@babel/preset-typescript',  ],  plugins: [    '@babel/plugin-transform-runtime', // avoids duplicated helpers in output  ],};

Presets in Practice

How preset-env transforms modern syntax for older targets.

javascript

// npm install --save-dev @babel/core @babel/preset-env @babel/cli// Input (modern JS)const greet = (name) => `Hello, ${name}!`;// preset-env transforms output based on browserslist targets, e.g.:"use strict";var greet = function greet(name) {  return "Hello, ".concat(name, "!");};

CLI Usage

Transpiling files and directories from the terminal.

bash

npx babel src --out-dir lib           # transpile a directorynpx babel script.js --out-file out.js  # transpile a single filenpx babel src --watch --out-dir lib    # watch modenpx babel-node src/index.js            # run without a separate compile step

Core Concepts

The pieces that make up the Babel toolchain.

@babel/core- the compiler engine that parses, transforms, and generates code
preset-env- bundles the plugins needed to support a given set of target browsers
browserslist- shared config (e.g. a browserslist field or .browserslistrc file) that determines what preset-env targets
plugin- a single transform, e.g. plugin-transform-arrow-functions
polyfill (core-js)- adds missing runtime APIs like Promise or Array.flat that syntax transforms alone can't provide
AST (Abstract Syntax Tree)- the intermediate representation Babel parses code into before transforming it

Pro Tip

Set explicit browserslist targets instead of relying on Babel's defaults: an overly broad target list silently bloats your bundle with transforms and polyfills that nobody in your actual audience needs.

Was this cheat sheet helpful?

Vite Cheat Sheet

ESLint & Prettier Cheat Sheet