Babel — это универсальный многоцелевой компилятор для JavaScript. Используя Babel, вы можете создать следующее поколение JavaScript, а также следующее поколение инструментария для JavaScript.
JavaScript как язык постоянно развивается, постоянно появляются новые спецификации и предложения с новыми возможностями. Использование Babel позволит вам использовать многие из этих возможностей за несколько лет до того, как они станут доступны повсеместно.
Babel делает это, компилируя код JavaScript, написанный с учетом последних стандартов, в версию, которая будет работать везде уже сегодня. Этот процесс известен как компиляция из источника в источник, также известная как transpiring. Источник: Джейми Кайл
Что такое Babel?
Babel — это компилятор javascript, что означает компиляцию javascript в javascript,
Babel делится на различные этапы:
- Входной исходный код
- Преобразованный AST
- Генерация оригинального AST
- Выходной исходный код
Это делается тремя различными пакетами
- @babel/parser
- @babel/traverse
- @babel/generator, все они находятся внутри babel-core, который предоставляет простой API, потому что использовать три разных пакета только для компиляции вашей программы не просто, поэтому мы объединили их в один пакет, упростив задачу.
Рассказываем о babel-parser
Парсер Babel делится на различные фазы:
- Лексический анализ :Преобразование входного исходного кода в список лексем.
var age = 10;
/* var age = 7;
Во время этой фазы он сообщает об ошибках, связанных с недопустимым литералом или приглашением глав, например, если у нас есть нетравматичный комментарий или строка, если есть глава, которая не имеет смысла, он сообщает об этих ошибках.
-
Синтаксический анализ :
Получает список лексем, сгенерированных во время лексического анализа, и строит абстрактное дерево синтаксиса. -
Семантический анализ :
Проверяет соблюдение в AST всех статических правил ECMAScript, называемых ранними ошибками, а также сообщает об ошибках, связанных с недопустимыми переменными, используя трекер области видимости.
Особенности Babel
Вот основные вещи, которые Babel может сделать для вас:
- Преобразование синтаксиса
- Полифилл функций, отсутствующих в вашей целевой среде (через сторонний полифилл, например, core-js)
- Преобразования исходного кода
Предустановки
Предустановки Babel могут выступать в качестве совместно используемого набора плагинов Babel и/или параметров конфигурации.
Мы собрали несколько пресетов для распространенных сред:
- @babel/preset-env для компиляции синтаксиса ES2015+.
- @babel/preset-typescript для TypeScript
- @babel/preset-react для React
- @babel/preset-flow для Flow
Файлы конфигурации
Babel имеет два параллельных формата конфигурационных файлов, которые можно использовать как вместе, так и независимо друг от друга.
- Конфигурация всего проекта
-
файлы babel.config.*, со следующими расширениями: .json, .js, .cjs, .mj
-
Конфигурация относительно файла
-
Файлы .babelrc.*, со следующими расширениями: .json, .js, .cjs, .mjs.
-
Файл .babelrc, без расширения.
-
файлы package.json, с ключом «babel».
Что дальше?
Теперь вы знаете основы того, как babel транспилирует Javascript. Вы знаете, что это такое, и почему это может быть полезно. Но ничто не убедит вас больше, чем некоторый практический опыт. Для более глубокого понимания вы можете заглянуть на :
- Официальный сайт babel : Ссылка здесь ✌️
- Руководство пользователя Babel, написанное Джейми Кайлом: Ссылка здесь ✌️.
Спасибо за чтение
Не стесняйтесь подписываться на мою рассылку по электронной почте и общаться со мной