The Ultimate Babel Presets Cheatsheet: Transform Your JavaScript with Confidence

Introduction to Babel Presets

Babel is a powerful JavaScript compiler that transforms modern JavaScript code into backwards-compatible versions that can run in older environments. Babel presets are collections of plugins bundled together to support particular JavaScript features or frameworks. They simplify the Babel configuration process by providing pre-determined sets of transformations rather than requiring users to configure individual plugins.

Core Concepts of Babel Presets

Presets: Pre-configured bundles of Babel plugins that transform specific sets of JavaScript features
Configuration: Defined in .babelrc, babel.config.json, or within package.json
Compilation Process: Source code → Babel (with presets) → Compatible JavaScript output
Plugin Ordering: Plugins run before presets; presets run in reverse order (last to first)
Customization: Presets accept options to fine-tune their behavior

Setting Up Babel with Presets

Install Babel core and CLI:

npm install --save-dev @babel/core @babel/cli

Install desired preset(s):

npm install --save-dev @babel/preset-env

Create configuration file (.babelrc or babel.config.json):
```
{
  "presets": ["@babel/preset-env"]
}
```

Add build script to package.json:

"scripts": {
  "build": "babel src -d lib"
}

Run the build process:
```
npm run build
```

Essential Babel Presets by Category

Official Presets

Preset	Purpose	Key Features
`@babel/preset-env`	Smart transpilation based on target environments	Browser targeting, polyfill injection, module transformations
`@babel/preset-react`	React JSX and Flow syntax support	JSX transformation, automatic runtime injection
`@babel/preset-typescript`	TypeScript support	TS to JS compilation, type annotation removal
`@babel/preset-flow`	Flow static type checker support	Flow annotation stripping, module exports

Framework-Specific Presets

Preset	Purpose	Key Features
`@vue/babel-preset-app`	Vue.js applications	JSX, modern syntax, polyfills for Vue CLI
`@angular/babel-preset`	Angular applications	Decorators, class properties, async/await
`@svelte/babel-preset`	Svelte applications	Component compilation, reactive statements
`@emotion/babel-preset-css-prop`	Emotion CSS-in-JS	CSS prop transformation, styled components

Special Purpose Presets

Preset	Purpose	Key Features
`@babel/preset-modules`	ES modules optimization	Fixed edge cases in modern browsers
`babel-preset-minify`	Code minification	Size reduction, dead code elimination
`babel-preset-power-assert`	Testing enhancement	Detailed assertion messages
`babel-preset-gatsby`	Gatsby.js applications	React, flow, TypeScript and class properties

Preset-env Configuration Options

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "not dead", "> 0.5%"],
        "node": "current"
      },
      "useBuiltIns": "usage",
      "corejs": 3,
      "modules": false,
      "debug": true
    }]
  ]
}

Common Challenges and Solutions

Challenge	Solution
Excessive bundle size	Configure `preset-env` with specific targets and `useBuiltIns: "usage"`
Conflict between presets	Ensure proper preset ordering (most specific last)
Missing polyfills	Add `core-js` and configure `useBuiltIns` option
TypeScript and React together	Use both presets with proper ordering (`typescript` before `react`)
Experimental features not working	Add specific plugins for cutting-edge features not in presets
Slow build times	Use selective transpilation with `browserslistrc` or implement caching

Best Practices for Babel Presets

Be specific with targets: Define precise browser/node versions to avoid unnecessary transformations
Leverage browserslist: Use .browserslistrc for sharing targets across tools
Enable debugging: Use debug: true option to see what’s being transformed and why
Separate dev and prod configs: Use different settings for development and production
Implement caching: Enable the cacheDirectory option for faster rebuilds
Keep dependencies updated: Regularly update Babel and its presets for improvements
Avoid redundancy: Don’t use plugins already included in your presets
Use the minimal configuration: Start simple and add complexity only when needed

Comparison: useBuiltIns Options

Option	Effect	Bundle Size	When to Use
`false`	No polyfills included	Smallest	When using another polyfill strategy
`"entry"`	Replaces import statements with specific polyfills	Medium	For complete environment support
`"usage"`	Adds polyfills based on actual code usage	Optimized	Most applications (recommended)

Resources for Further Learning

Official Babel Documentation
Babel Handbook
Modern JavaScript Tutorial
Frontend Masters Babel Courses
Babel Plugin Handbook
Awesome Babel – Collection of Babel plugins and presets

Would you like me to explain any particular section of this cheatsheet in more detail, or would you like to proceed with another topic for your next cheatsheet?