Эта статья знакомит с Babel , компилятором JavaScript, который позволяет разработчикам использовать JavaScript следующего поколения сегодня.
При создании веб-приложений может быть сложно написать JavaScript. Мы должны подумать о функциях, доступных в браузерах, на которые мы нацелены, и о том, что происходит, когда функция не реализована. Некоторые люди рекомендуют просто не использовать его, что является болезненным опытом в большинстве случаев, если мы создаем что-то сложное.
К счастью, некоторые инструменты позволяют нам перестать беспокоиться о том, что поддерживается, и просто написать лучший код, который мы можем. Их называют транспилерами. Транспортер — это инструмент, который принимает исходный код в качестве входных данных и создает новый исходный код в качестве выходных данных с другим синтаксисом, но семантически максимально приближенным — или идеально эквивалентным — оригиналу.
Babel — в значительной степени стандартный транспортер для перевода современного JavaScript (ES2015 +) в совместимые реализации, которые работают в старых браузерах. Это идеальное решение, если вы просто хотите сосредоточиться на написании JavaScript.
И хотя главная цель Babel — перевести новейшие стандарты ECMAScript (ES) для старых — а иногда и текущих — браузеров, он может сделать больше. Существует экосистема пресетов и плагинов, которые делают возможным добавление нестандартных функций. Каждый плагин делает новую функцию / преобразование доступной для вашего кода, а пресеты — это просто набор плагинов.
Начиная
Существуют разные способы настройки Babel в зависимости от вашего проекта и используемых вами инструментов. В этой статье мы собираемся объяснить, как настроить Babel с помощью CLI, хотя, если вы используете систему сборки или фреймворк, вы можете ознакомиться с конкретными инструкциями на официальном сайте . В большинстве случаев CLI — это самый быстрый и простой способ начать работу, поэтому, если вы начинающий пользователь, продолжайте.
Первым шагом для настройки Babel в проекте является установка пакета с использованием npm и добавление его в качестве зависимости dev. Предполагая, что у вас уже есть работающая среда Node.js, просто запустите в своем терминале следующее:
mkdir babel-test cd babel-test npm init -y npm install --save-dev babel-cli Это создаст изменение каталога ( babel-test ) в каталоге, инициализирует проект npm (таким образом создавая файл package.json ), а затем установит babel-cli как зависимость dev.
Если вам нужна помощь с вышеперечисленным, обратитесь к нашим учебным пособиям по установке Node и работе с npm .
Затем мы можем открыть package.json и добавить команду build в наши скрипты npm:
"scripts": { "build": "babel src -d dist" }
Это возьмет исходные файлы из каталога src и выведет результат в каталог dist . Тогда мы можем выполнить это как:
npm run build
Но ждать! Перед запуском Babel мы должны установить и настроить плагины, которые преобразуют наш код. Самый простой и быстрый способ сделать это — добавить пресет Env , который выбирает соответствующие плагины в зависимости от целевых браузеров, которые вы указали. Может быть установлен с помощью:
npm install babel-preset-env --save-dev
Затем создайте файл .babelrc в корне вашего проекта и добавьте пресет:
{ "presets": ["env"] }
Файл .babelrc — это место, куда вы помещаете все свои настройки для Babel. Вы будете использовать это в первую очередь для настройки пресетов и плагинов, но доступно гораздо больше опций. Вы можете проверить полный список на странице Babel API .
Обратите внимание, что в зависимости от вашей операционной системы файлы, начинающиеся с точки, будут по умолчанию скрыты. Если это проблематично для вас (или если вы просто предпочитаете меньше файлов), вы можете поместить свои настройки Babel в файл package.json под ключом babel , например, так:
{ "name": "babel-test", "version": "1.0.0", "babel": { // config } }
Наконец, давайте создадим каталоги и файлы, которые Babel ожидает найти:
mkdir src dist
И дать ему что-то для преобразования:
let a = 1; let b = 2; [a, b] = [b, a]; console.log(a); console.log(b);
В этом примере используется назначение деструктурирования для замены значений двух переменных.
Бегущий Вавилон
Теперь, когда у вас есть готовая к использованию установка Babel, вы можете выполнить команду build чтобы запустить процесс компиляции:
npm run build
Это возьмет код из src/main.js , преобразует его в код ES5 и выведет преобразованный код в dist/main.js
Вот что это произвело:
"use strict"; var a = 1; var b = 2; var _ref = [b, a]; a = _ref[0]; b = _ref[1]; console.log(a); console.log(b);
Как видите, let был заменен на var а Babel ввел временную переменную (обозначенную подчеркиванием) для облегчения обмена.
Вот и все. Код, который вы пишете в каталоге src будет переведен на предыдущие версии языка. По умолчанию, если вы не добавите какие-либо параметры в пресет, будут загружены все преобразования. Вы также можете указать целевые браузеры следующим образом:
{ "presets": [ ["env", { "targets": { "browsers": ["last 2 versions", "safari >= 7"] } }] ] }
При этом будут загружены необходимые преобразования для поддержки последних двух версий каждого браузера и Safari, большей или равной версии 7. Доступные параметры для целевых браузеров можно найти в репозитории Browserlist .
Вавилонская экосистема: краткий обзор
Как вы заметили в предыдущем разделе, Babel ничего не сделает сам, когда вы его установите. Мы должны установить набор плагинов, чтобы получить желаемое поведение, или мы можем использовать предустановки, которые являются предопределенными наборами плагинов.
Обычно каждая функция, которую вы хотите включить, имеет вид плагина. Некоторые примеры для ES2015 включают в себя:
Смотрите страницу плагинов в Babel Docs для полного списка.
Но иногда вы не хотите включать все плагины один за другим. Так что есть готовые пресеты, которые облегчат процесс установки каждого плагина.
В настоящее время доступны три официальных пресета:
Env — наиболее часто используемый и тот, который мы использовали здесь. Он автоматически загружает все необходимые преобразования, чтобы сделать ваш код совместимым в зависимости от целевых браузеров.
Предустановка React преобразует код, обычно встречающийся в проектах React, в основном добавляя совместимость с аннотациями Flow и JSX .
И, наконец, пресет Flow используется для очистки кода от аннотаций типа Flow (хотя он не проверяет, являются ли типы допустимыми или нет).
Бабель Полифилл
Существуют функции JavaScript, которые не могут быть синтаксически преобразованы, как правило, потому что не реализованы эквивалентные функции — например, Promises и функции генератора.
Такие функции должны быть реализованы в браузере библиотекой, которая будет использоваться в вашем коде, и это работа полизаполнения.
Вавилонский полифилл состоит из core-js и среды выполнения регенератора . Вместе они охватывают все функции ES2015 +.
Расширенное использование
Как уже упоминалось, Babel также можно использовать для преобразования функций, которые еще не были реализованы в языке. Хорошим примером этого является предложение полей класса (в настоящее время на этапе 3 TC39: кандидат ). Это особенно популярно среди разработчиков React, так как устраняет необходимость явной привязки методов к определенному компоненту, а также означает, что состояние компонента может быть объявлено как поле класса (потенциально устраняя необходимость в конструкторе).
Для тех, кто хочет использовать поля класса сегодня, вам нужно добавить babel-plugin-transform-class-properties в качестве зависимости dev:
npm install --save-dev babel-plugin-transform-class-properties
Вы также обновите свой файл .babelrc следующим образом:
{ "presets": ["env"], "plugins": ["transform-class-properties"] }
Теперь вы можете написать:
class App extends Component { state = { count: 0 }; incCount = () => { this.setState(ps => ({ count: ps.count + 1 })); }; render() { return ( <div> <p>{ this.state.count }</p> <button onClick={this.incCount}>add one</button> </div> ); } }
И это не останавливается там. Вы также можете использовать Babel, чтобы добавить свои новые функции в язык, как демонстрирует наш учебник Понимание AST путем создания собственного плагина Babel .
альтернативы
Написание современных веб-приложений иногда требует не только функций, доступных в JavaScript. Другие языки также могут быть переведены в совместимый JavaScript, но также реализованы и другие полезные функции.
Наиболее популярным вариантом является TypeScript , который представляет собой обычный JavaScript, который реализует современные функции ES, но также добавляет другие, особенно в отношении безопасности типов.
С другой стороны, в разных категориях есть совершенно разные языки, от функциональных, таких как PureScript, до объектно-ориентированных, как Dart.
Для более глубокого обзора альтернативных языков взгляните на 10 языков, которые компилируются в JavaScript .
Вывод
Babel — отличный вариант для написания современных приложений, в то же время поддерживающий JavaScript, который понятен всем разработчикам и широкому кругу браузеров, в которых должен работать код.
Babel полезна не только для преобразования ES2015 + в предыдущие версии языка — как в браузере, так и на платформах, таких как Node.js, — но также для добавления новых функций, которые не являются частью стандарта. Чтобы понять, что я имею в виду, просто посмотрите каталог npm, чтобы найти все доступные плагины или пресеты Babel.
Поскольку JavaScript развивается такими быстрыми темпами, очевидно, что производителям браузеров потребуется время для реализации новейших функций. Предоставление Babel места в вашем наборе инструментов означает, что вы можете написать современный JavaScript сегодня, будучи уверенным в том, что вы не откажетесь ни от одного из своих пользователей. Что не любить?