Presets, Plugins & Config

What Babel Does

Babel is a compiler: it parses source into an AST, applies plugin-defined transforms, then generates new code. It rewrites modern/non-standard syntax (arrow functions, optional chaining, JSX) into a version that runs in older or different environments. It does not bundle files — that's a separate concern (webpack, Vite, esbuild).

Basic Config

// babel.config.js — project-wide, applies even inside node_modules if needed
module.exports = {
  presets: [
    ['@babel/preset-env', { targets: '> 0.5%, not dead' }],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
  ],
};

preset-env & browserslist

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

preset-env reads browserslist to decide exactly which transforms/polyfills are needed — targeting old browsers like IE 11 forces more transforms and larger output; modern targets let it skip already-supported features.

Plugin vs. Preset, Order Rules

A preset is just a curated bundle of plugins. Plugins run before presets; plugins run in listed order (first to last), presets run in REVERSE order (last to first) — a common source of confusing bugs when custom plugins interact with preset transforms.

.babelrc vs babel.config.js

.babelrc is file/directory-relative and doesn't reliably apply across a monorepo's node_modules boundary. babel.config.js at the project root applies project-wide, which is usually what's actually wanted in a monorepo.