Frontend | Вопросы собесов

🤔 Что делает 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"));

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

"use strict";

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

🚩Использование Babel

1⃣Установка Babel через npm

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

2⃣Создание конфигурации (.babelrc)

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

3⃣Транспиляция файла (script.js)

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

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍7

www.tg-me.com/us/Frontend | Вопросы собесов/com.easy_javascript_ru/1317

3.95K viewsApr 4 at 09:10

🤔 Что делает 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