Что такое Babel и зачем нужна транспиляция?

Вопрос

Что такое Babel и для чего он нужен в современной frontend-разработке?

Короткий ответ

Babel — это транспилятор: инструмент, который преобразует современный код JavaScript (ES6+) в эквивалентный код на более старом стандарте (обычно ES5), понятный старым браузерам и средам выполнения.

Подробный ответ

Браузеры обновляются с разной скоростью, и часть пользователей может использовать устаревшие версии, не поддерживающие новый синтаксис. Babel решает эту проблему: разработчик пишет современный, удобный код, а Babel на этапе сборки превращает его в совместимый эквивалент.

Как это работает по шагам:

1. Parse — исходный код разбирается в AST (абстрактное синтаксическое дерево).
2. Transform — плагины/пресеты Babel обходят дерево и заменяют современные конструкции старыми эквивалентами.
3. Generate — из изменённого AST генерируется итоговый код.

Babel сам по себе не добавляет отсутствующие в старых средах функции (например, Promise или Array.prototype.includes) — для этого нужны полифилы (core-js), а Babel лишь меняет синтаксис.

В современных инструментах (Vite, включая тот, что использует Nuxt) Babel зачастую скрыт "под капотом" или заменён более быстрыми альтернативами (esbuild, SWC) для большинства трансформаций, но остаётся стандартом де-факто для сложных кейсов и плагинов экосистемы.

Пример

// До транспиляции (ES6+)
const greet = (name) => {
  return `Hello, ${name}!`
}
console.log(greet('John'))

// После транспиляции Babel (ES5)
"use strict"

var greet = function greet(name) {
  return "Hello, " + name + "!"
}
console.log(greet('John'))

Дополнительные вопросы

• Чем транспиляция отличается от полифилов?
• Что такое browserslist и как он влияет на то, что транспилирует Babel?
• Почему Vite использует esbuild для dev-сборки, а не Babel?