Начните с Babel 7

JavaScript уникален из-за широты экосистемы. Хотя новые стандарты добавляют синтаксический сахар, получая их поддерживаемыми на браузерах, требуется время. Вавилон работает вокруг этой проблемы через автоматическую транспиляцию.

Идея продукта простой: Babel принимает код ES6 или ES7 и заменяет новые синтаксические элементы с помощью кода эмуляции. Его вывод подтверждает Classic Syntax JavaScript и работает на более старых браузерах, таких как Internet Explorer.

Первоначальный релиз Бабела взял мир штурмом. Вскоре после этого появились различные рамки, такие как реагирование, Vue и Ember. Разработчики часто используют продукт, не зная, что он работает на заднем плане - более одного популярного проекта NPM имеет зависимость от Babel.

• Как сделать приложение

Эти зависимости преобразовали процесс высвобождения предшественника в конфликтное дело. Версия 7, по-прежнему управляемая небольшая команда сопровождающих, таким образом пыталась быть максимально совместимым. Изменения в нарушении мало и далеко между, а качество генерации кода остается высоким (если вы работаете с командой, сохраняя документы в облачное хранилище поможет вам остаться сплоченным).

Если вы не работали с Babel раньше, пусть это будет вашим гидом. Возможность использования расширенных функций JavaScript без беспокойства совместимости делает жизнь намного проще.

Вы хотите, чтобы некоторые инструменты для упорядочения вашего процесса? Наше руководство к лучшему Строитель сайта поможет. Хотите долгосрочную поддержку? Получить право веб хостинг служба.

01. Регион версии

Babel обычно живет в среде выполнения узла. Давайте начнем, проверяя используемые версии. Выходные данные предоставляют состояние версии, найденное на рабочей станции Ubuntu 14.04, используемой для создания следующей статьи. Это не педанстра - фигура, сопровождающая этот шаг, показывает, что команда Babel снизила поддержку довольно нескольких версий Node.js.

 Tamhan @ Tamhan-ThinkPad: ~ $ Node --version
v8.14.0
Тамхан @ Тамхан-ThinkPad: ~ $ npm --version
6.4.1 

02. Изменение имен пакетов

Одним из разрывных изменений в версии 7 включало в себя перемещение пакетов Babel в собственное пространство имен. Старые пакеты не были удалены из различных репозиториев. Это важно, так как использование имен устаревших пакетов приводит к ситуации, показанной на рисунке, сопровождающему этот шаг.

 Tamhan @ Tamhan-ThinkPad: ~ / workspaceb7 $ npm
Установите --save-dev @ Babel / Core @ Babel / cli @
Babel / Preset-Env @ Babel / Node
Отказ Отказ Отказ
+ @ Babel / Core @ 7.2.0
+ @ Babel / Node @ 7.2.0
+ @ babel / cli @ 7.2.0
+ @ Babel / Preset-Env @ 7.2.0 

03. Добавить действие по сборке

Шаг выше предполагает, что вы работаете внутри проекта NPM. В этом случае работает Babel через действие сборки легко. Открыть Package.json. и изменить его как продемонстрировано в коде ниже:

 {
Отказ Отказ Отказ
«Главная»: «index.js»,
«Сценарии»: {
«Тест»: «Echo \» Ошибка: нет теста
Указал \ "& amp; & amp; Выход 1",
"построить": "Babel index.js -d lib"

}, 

04. Транспильный код вручную

Помещение Вавила на работу включает в себя стремление от действия по сборке. Это лучше всего выполнено через команду NPM RUN. То потрясающий Стоимость сообщает Babel, что результаты должны быть размещены в ликвидность Папка - фигура, сопровождающая этот шаг, показывает, что папка создается на лету.

 Tamhan @ Tamhan-ThinkPad: ~ / workspaceb7 $ npm
пробежать сборку
и GT; Workspaceb7 @ 0.0.0 Build / Home / Tamhan /
workspaceb7.
и GT; babel index.js -d lib
Успешно скомпилирован 1 файл с Babel. 

05. Вопрос на конфигурацию

Призывая бабел без дополнительных вариантов конфигурации не включает транспитацию. Код может быть транспортирован только в том случае, если структура получает дополнительную информацию о целевой среде. Это может быть сделано через параметр командной строки или создавая файл под названием .babelrc. в корне проекта.

06. Настройте Babelrc

Babel конфигурирует себя через набор плагинов, каждый из которых применяет трансформирующую трансформироваться в базу кода. Мы используем предустановка Пакет - он поставляется с предварительно настроенным набором преобразований, предназначенных для покрытия большинства оснований.

 {
«Прессы»: ["@ babel / preset-env"]
} 

07. Время для тест-драйва

Добавьте немного javaScript New-age для index.js, чтобы проверить программу против некоторого в прямом эфире. Код, сопровождающий этот шаг, не будет работать на устаревших браузерах - когда это сделано, неявная функция заменяется нормальный Декларация, как показано на рисунке.

Функция Tamstest () {
[1, 2, 3] .map ((n) = & gt; n + 1);
} 

08. Отрегулируйте нацеливание

предустановка Применяет большинство транспиляций по умолчанию: цель продукта состоит в том, чтобы создать универсально совместимый JavaScript без учета пропускной способности и затрат на производительность. Вы можете изменить его конфигурацию, пройдя в целевые цели Объект - пример ниже нацеленные на конкретные версии Chrome и IE.

 {
«Прессы»: [
[
"@ babel / preset-env",
{
«Цели»: {
"Chrome": "58",
"Т.е.": "11"
}
}
Несомненно
Несомненно
} 

09. Расширенное нацеливание

Нацелирование браузера Babel не ограничивается Chrome и Internet Explorer. Благодаря сотрудничеству с браузеры Разработчики могут смешивать и совпадать из более чем дюжина целей, как показано ниже.

Имена нечувствительны к регистру:

• Андроид Для Android WebView.
• Байду Для браузера Baidu.
• Ежевика или же BB Для BlackBerry браузера.
• Хром для Google Chrome.
• ChromeAndroid или же and_chr. Для хрома для андроида.
• Край Для Microsoft Edge.
• Электрон для электронной структуры. Он будет преобразован в Chrome Version.
• Проводник или же т.е. Для Internet Explorer.
• Проводник или же IE_MOB. Для Internet Explorer Mobile.
• Fire Fox или же вспомогательный Для Mozilla Firefox.
• FirefoxAndroid или же и_ff. Для Firefox для Android.
• Иос или же IOS_SAF. для iOS Safari.
• Узел Для Node.js.Opera для оперы.
• Опера мини или же op_mini. Для оперы мини.
• Оперический или же op_mob. для Opera Mobile.
• QQAndroid или же and_qq. Для браузера QQ для Android.
• Сафари Для настольных Safari.
• Samsung Для Samsung Internet.
• Ucandroid или же and_uc. Для UC браузера для Android.

10. Усовершенствованное нацеливание, часть два

Браустрелист также может принимать продвинутые запросы. Его домашняя страница Перечисляет параметры конфигурации, почти все из которых также можно использовать внутри Babel, изменяя Babelrc. Отказ Запросы могут быть оценены локально, если ваша рабочая станция установлена ​​NPX.

 {
«Цели»: «& GT; 0,25%, не мертвы»
} 

11. Автоматическая транспиляция

Надеждаясь, что Babel вручную быстро становится утомительным. Утилита утилиты Nodemon мониторирует ресурсы файловых систерных систем и пожарных команд, поскольку изменения обнаружены. Теоретически, добавление поддержки Nodemon обрабатывается через небольшое изменение в Package.json. Отказ

 {
"Название": "Workspaceb7",
Отказ Отказ Отказ
«Главная»: «index.js»,
«Сценарии»:
{
«Пуск»: «Nodemon --exec Babel-Node
index.js ", 

12. Проверьте наличие наличия

Некоторые рабочие станции имеют узел Установлен по всему миру. Если это не так, вызывая программу принести сообщение об ошибке, аналогично тому, которое показано ниже. К счастью, развертывание узел легко выполняется через Установка NPM команда.

 Tamhan @ Tamhan-ThinkPad: ~ / workspaceb7 $ npm
Установите --save-dev Nodemon 

13. Проверьте функциональность

Опускаться Начнем NPM в окне терминала и перейдите к изменению содержания index.js. с редактором, как Гедит или Визуальный студийный код Отказ После сохранения, узел будет выводить информацию о состоянии.

 [Nodemon] перезапущен из-за изменений ...
[Nodemon] Начало `Babel-Node Index.js`
[Nodemon] Чистый выход - Ожидание изменений
Перед перезапуском 

14. Исправить транспиляцию

Пока узел обнаружение должно работать безупречно в этот момент, содержимое index.js. файл, который найден в ликвидность Не обновляйте. Это вызвано красивым бабел-узел - Это не совершает транспортированные файлы на диск. Это вместо этого стреляет из модифицированной версии узла CLI, которая работает с транспортированными файлами.

15. Промышленный код программно

Babel не ограничивается работой над командной строкой. Если правильные пакеты установлены, код также может быть транспортирован из другой программы. Симпатичный фрагмент, сопровождающий этот шаг, применяет набор основных преобразований в входную строку. Имейте в виду, что настройки конфигурации, как правило, получаются из Babelrc. файл.

 var babel = требует ("@ babel / core");
Импорт {преобразование} из «@ Babel / Core»;
Импорт * как Бабел из "@ babel / core";
babel.transform ("код ();", варианты,
Функция (ошибка, результат) {
Результат. Код;
Результат.
результат.
}); 

16. Собрание целых файлов

Исходный код обычно не хранится в строковых переменных. API BABEL API с учетом этого с помощью набора функций, связанных с файлами, которые отказались от входной строки для переменной с именем файла. Результаты, однако, возвращаются как обычный JavaScript переменная.

 vabel.transformfile ("filename.js", варианты,
Функция (ошибка, результат) {
результат; // = & gt; {код, карта, AST}
}
); 

17. Синхронизация и асинхр

Babel 7 представил синхронные и асинхронные версии большинства вызовов API. Убедитесь, что выберите правильный для своих потребностей - во время транспилова могут быть сделаны небольшие примеры на лету, настраивая Babel Follow на более сложных файлах может легко привести к задержкам, работающим на десятки секунд.

18. Узнайте об отдельных плагинах

Если вы когда-нибудь оказали себя вопросом о том, что происходит на заднем плане, просто посетите эта страница Отказ Он предоставляет список всех плагинов, которые в настоящее время содержатся в дистрибутиве Babel, а также содержит несколько советов для всех тех, кто стремится создать свой собственный плагин.

19. Разделите специфические данные

Babel не ограничивается транспилингом New-Age JavaScript элементами. Продукт содержит ограниченный функциями ShareCry Engine. Он положивает информацию о печати и заменяет расширенные элементы. К сожалению, Babel не выполняет проверку типа - это исключает одну из самых значительных преимуществ языка TeampScript.

 {
«Прессы»: [«@ Babel / Preset-Tymdercript»]
} 

20. Беги Бабела онлайн

Хотя операции трансигации обычно работают гладко, иногда возникают проблемы. В этом случае Babel reft. полезно. Он запускает Babel в браузере вашей рабочей станции и показывает вход и вывод прямо рядом друг с другом.

21. Узнайте о болевых точках

Наше представление объяснило, что Бабел видит широкое использование в различных проектах. Команда поддержки Babel упрощает обновления версии с Детальный журнал изменений Отказ Если вы используете Babel программно, не забудьте проконсультироваться с Руководство по обновлению API Отказ

Эта статья была первоначально опубликована в выпуске 283 журнала Creative Web Design Веб-дизайнер Отказ Купить проблему 283 здесь или же Подписаться на веб-дизайнер здесь Отказ

Статьи по Теме:

• Как кодировать быстрее, легкий JavaScript
• 5 удивительных apis javascript
• 27 шаблоны сайта высшего класса