Transpiling Modern Features

Arrow functions to function expressions

Arrow functions are convenient, but older browsers don't support them. Babel converts them to regular functions.

// Input (ES6)
const square = (x) => x * x;
const greet = name => `Hello, ${name}`;

// Output (ES5)
var square = function(x) {
  return x * x;
};
var greet = function(name) {
  return "Hello, " + name;
};

Async/await to promises

Async/await is syntactic sugar for promises. Babel converts async () => { await ... } into promise chains.

// Input (async/await)
async function fetchData() {
  const data = await fetch('/api');
  return data.json();
}

// Output (promise-based)
function fetchData() {
  return __awaiter(this, void 0, void 0, function*() {
    const data = yield fetch('/api');
    return data.json();
  });
}

Syntax vs runtime features

Babel can transpile syntax (arrow functions, destructuring) but cannot add runtime features that don't exist (Array.prototype.at()). Use polyfills for runtime features.