Что такое Babel и что он делает? Flashcards
Что такое Babel и что он делает?
Что такое Babel и какую проблему он решает?
Babel — это компилятор, который преобразует ваш современный JavaScript для запуска в старых браузерах. Он также может выполнять и другие задачи, такие как преобразование синтаксиса JSX, но это не единственный инструмент для этого.
По мере развития браузеров добавляются новые функции API и ECMAScript. Различные браузеры развиваются с разной скоростью и расставляют акценты в качестве приоритетных для разных задач. Это ставит нас перед непростым выбором: как мы можем их все поддерживать и при этом использовать современные функции? Некоторые из них будут несовместимы.
Обычное решение заключается в том, чтобы использовать новейшие возможности и трансформировать их в более старый код, который будет понятен браузеру. Транспилирование (Transpiling — сочетание двух слов: transforming — преобразование и compiling — компиляция) описывает специализированный тип компиляции. Она имеет различные значения в разных контекстах. В нашем случае также существуют две отдельные составляющие для переноса (транспилирования).
______________________________________________________________________________________
Разница между транспилированием (transpiling) и полифилингом (polyfilling)
Транспилирование (Transpiling) — это процесс преобразования синтаксиса нового языка, который старые браузеры не могут понять, в старый синтаксис, который они распознают.
Приведем пример переноса оператора let:
// the new syntax let was added in ECMAScript 2015 aka ES6
let x = 11;
// let transpiles to the old syntax var if your transpiler target was ES5
var x = 11;
Полифилинг (Polyfilling) — это процесс добавления недостающих методов, свойств или API к старым браузерам путем предоставления собственной версии недостающего родного кода.
Это можно рассматривать как дополнение недостающих элементов. Например, вот полифил (polyfill) для isNaN:
// check if the method isNaN exists on the standard built-in Number object
if (!Number.isNaN) {
// if not we add our own version of the native method newer browsers provide
Number.isNaN = function isNaN(x) {
return x !== x;
};
}
Наилучшим способом для получения полифилов является использование core-js.
Транспилирование и полифилинг иногда невозможны и могут значительно увеличить объем кода, лучше всего их вообще избегать, если это возможно. Поэтому альтернатива, которую мы будем рассматривать в первую очередь, является наиболее оптимальным решением.
______________________________________________________________________________________
Альтернатива №1: не поддерживать древние браузеры
Альтернатива № 2: Используйте eslint-plugin-compat
Вы можете вообще избежать всего процесса переноса (transpiling) и вместо этого позволить вашему редактору кода предупредить вас, если вы используете какие-либо функции, которые слишком сложны для браузеров ваших клиентов. Это самый простой вариант, потому что он:
- исключает любую зависимость от транспилиров (transpilers). Возвращает вам практический контроль над рабочим кодом.
- если имеется современная функция, без которой вы не можете жить, то ее можно использовать применив полифил (polyfill).
В противном случае, вы можете просто использовать старый синтаксис, когда это необходимо.
