Babel преобразует новый синтаксис ES6 в совместимый синтаксис со всеми браузерами ES5 . Благодаря компилятору Babel , программисты прямо сейчас могут использовать самый современный JS , не дожидаясь полной поддержи браузеров.
Babel преобразует новый синтаксис ES6 в совместимый синтаксис со всеми браузерами ES5. Благодаря компилятору Babel, программисты прямо сейчас могут использовать самый современный JS, не дожидаясь полной поддержи браузеров.
А что касается IE11, то этой поддержки вряд ли когда-нибудь дождемся. Без компиляторов кода было бы сложно пробиваться новым технологиям в веб-разработке.
По этой ссылке можно попробовать скомпилировать JS код, однако для серьёзной разработки необходимо Babel установить на компьютер. У вас уже должен быть установлен node.js. Очень удобно пользоваться редактором кода VS code, из-за встроенного в программу терминала.
Установка Babel
npm install -g babel-cli --save-dev
Командная строка инсталлирует Babel и создаст файл package.json. Одного Babel недостаточно, ещё нужны плагины. Целесообразнее установить целый набор плагинов, например для ES2015.
npm install babel-preset-2015--save-dev
Надо указать, откуда и куда будет компилироваться код. Файл с готовым к употреблению кодом создастся автоматически, после введения команды ниже.
Вводим команду:
babel in.js –out-file out.js
В package.json добавим нашу первую команду, которую выполнит программа Babel.
"scripts": {
"build": "babel project –d –presets 2015 ",
},
[1, 2, 3].map((n) => n + 1);
npm run build
На данном этапе код не будет компилироваться сам по себе, каждый раз, когда мы напишем что-нибудь в файле in.js, надо вводить в терминале команду запуска npm run build.
Программисты народ ленивый, неужели так и будут запускать команду? Нет конечно, ещё одна строчка кода решит эту проблему.
Конфигурация Babel
Настроим Babel таким образом, чтобы изменения в исходном файле отслеживались программой и автоматически генерировался ES5 код, там где мы указали.
Добавим ещё одну строчку в package.json с командой watch. Эта команда самостоятельно отслеживает изменения в исходном JS файле и сразу компилирует код из ES6 в ES5.
"scripts": {
"build": "babel project –d –presets 2015",
"watch": "babel project –d –presets 2015 -w ",
},
Вводим команду npm run watch только один раз – это запускает режим наблюдения.
Допустим, мы хотим исходный файл положить в папку src, а компилированный файл в папку dist. Так, будет правильнее. Создадим папку src и положим туда in.js. Естественно, что об этом нужно сообщить Babel.
Эта команда создаст папку dist:
babel src –d dist
Минификация кода
Babel умеет сжимать код:
babel src –d dist –minified
Babel умеет компилировать синтаксис JSX, который используется во фреймворке React. Для этого нужно установить другой набор плагинов.
npm install –save-dev babel-preset-react
Набор с плагинами для React добавим в package.json.
"babel": {
"presets": [
"es2015",
"react",
]
Babel позволяет разработчикам писать современный JS код и не думать о кроссбраузерности.
