Babel

A JavaScript compiler that transforms modern JavaScript (ES6+) and JSX into backwards-compatible JavaScript that can run in older browsers.

Overview

Babel is a toolchain primarily used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript for older browsers or environments. It can transform syntax, polyfill features missing in your target environment, and transform JSX into React.createElement calls.

Example

javascript
// Input: Modern JavaScript with arrow functions and const
const greet = (name) => {
  return `Hello, ${name}!`;
};

// Output: Compatible with older browsers
var greet = function greet(name) {
  return "Hello, " + name + "!";
};

// JSX transformation
// Input:
const element = <h1>Hello, world!</h1>;

// Output:
const element = React.createElement('h1', null, 'Hello, world!');

Configuration

json
// .babelrc or babel.config.json
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

Key Points

  • Transpiles modern JavaScript to compatible code
  • Transforms JSX to regular JavaScript
  • Highly configurable with presets and plugins
  • Essential for React development
  • Integrated into most build tools

Learn More