🤔 Что делает babel?

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

🚩Зачем нужен Babel?

🟠Поддержка старых браузеров
Некоторые браузеры (например, 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"));

"use strict";

function greet(name) {
    return "Hello, " + name + "!";
}
console.log(greet("Alice"));

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

{
  "presets": ["@babel/preset-env"]
}

npx babel script.js --out-file script.compiled.js