Нужно ли использовать Babel для компиляции JavaScript, написанного с использованием современных возможностей ES6 и выше? Рассмотрим этот вопрос.
Что такое Babel и как он работает?
Babel — компилятор JavaScript. Он компилирует код, написанный с использованием современных функций JavaScript (стрелочные функции, деструктуризация, операторы rest/spread, let, const и т.д.), в ES5, поддерживаемый большинством браузеров.
Схема работы: браузер запрашивает JavaScript-файл с сервера. Если файл написан с использованием ES6+ функций, а браузер их не поддерживает, возникает ошибка. Babel решает эту проблему, компилируя ES6+ код в ES5 на сервере, удаляя функции, не поддерживаемые старыми браузерами. Браузер получает совместимый код, и ошибок не возникает.
Поддержка современных функций JavaScript браузерами
Данные конца 2018 года показывают, что Google Chrome занимает почти 60% рынка, а Internet Explorer — около 3% (включая мобильные браузеры). Слабую поддержку современных функций JavaScript (начиная с ECMAScript 2015) демонстрируют только Internet Explorer 11 и Opera Mini. Их общая доля рынка меньше 10%. Для большинства современных приложений эта цифра ещё меньше — менее 1%.
Практическое использование Babel и проверка поддержки браузеров
На сайте babeljs.io можно протестировать Babel. В онлайн-демо показано, как Babel преобразует код JSX (используемый в React) и анонимные функции ES6 в ES5.
Сайт https://kangax.github.io/compat-table/es6/ позволяет сравнить поддержку различных функций ECMAScript разными браузерами. Большинство функций (например, методы массивов) поддерживаются практически всеми браузерами, включая Internet Explorer 11. Однако, некоторые функции ES6 (например, rest-параметры) не поддерживаются Internet Explorer 11 или конкретными версиями других браузеров. Функции, появившиеся после ES6 (например, rest/spread для объектов, введенные в 2018 году), также имеют различную поддержку.
Демонстрация в консоли браузера показывает, что современные браузеры (например, Google Chrome) поддерживают большинство современных функций ECMAScript, включая rest/spread для объектов. В этом случае Babel не требуется.
Анализ данных о поддержке браузерами
Сайт caniuse.com позволяет проверить поддержку функций браузерами. Интеграция с Google Analytics позволяет получить данные о пользователях приложения и оценить поддержку функций среди них. Пример анализа показывает, что для некоторого приложения почти 98% пользователей используют браузеры, поддерживающие стрелочные функции, классы ES6 и rest-оператор.
JSX и необходимость Babel
JSX (используемый в React) не является частью стандарта ECMAScript и не поддерживается браузерами напрямую. Поэтому для использования JSX Babel или подобный транспилер необходимы.
Заключение: нужен ли Babel?
В большинстве случаев, если более 99% пользователей приложения используют браузеры, поддерживающие необходимые функции JavaScript, Babel не нужен. Однако для использования нестандартных расширений, таких как JSX, Babel (или аналогичный транспилер) обязателен.
Для остальных пользователей (1-2%), использующих браузеры со слабой поддержкой, можно использовать небольшие JavaScript-файлы для проверки поддержки функций и загрузки соответствующей версии кода (ES5 или ES6+). Это позволит избежать ошибок в браузере пользователя.