Babel – это транспилер для JavaScript, который преобразует современный код (ES6+ и JSX) в старый, совместимый с более старыми браузерами.
Поддержка старых браузеров
Некоторые браузеры (например, Internet Explorer) не поддерживают новые фичи JavaScript. Babel переводит код на более старый стандарт, чтобы он работал везде.
Поддержка современных стандартов (ES6, ES7, ES8...)
Позволяет использовать новые возможности JavaScript, даже если браузер их пока не поддерживает.
Компиляция JSX
Babel преобразует JSX (используется в React) в обычный JavaScript.
Оптимизация и эксперименты
Можно использовать нестандартные предложения для JavaScript, такие как плагины для новых фич.
Как это работает?
Babel делает три шага:
Парсинг – разбор кода в абстрактное синтаксическое дерево (AST).
Трансформация – изменение AST (например, замена
const на var). Генерация – создание нового кода из изменённого AST.
Пример работы Babel
Современный JavaScript (ES6+)
const greet = (name) => `Hello, ${name}!`;
console.log(greet("Alice"));После транспиляции Babel (ES5)
"use strict";
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("Alice"));
👉 @frontendInterview
