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

Babel можно использовать по-разному, но наиболее распространенным является использование его в качестве инструмента сборки в рабочем процессе разработки, где код транспилируется до его развертывания в рабочей среде. Babel можно интегрировать с другими инструментами, такими как Webpack, Grunt или Gulp, для автоматизации процесса транспиляции.

Babel поддерживает широкий спектр функций и плагинов, в том числе:

  1. Функции ECMAScript. Babel поддерживает последнюю версию ECMAScript и позволяет вам использовать новейшие языковые функции, даже если ваша целевая среда еще не поддерживает их.
  2. Полифиллинг: Babel включает библиотеку полифилла, которую можно использовать для предоставления отсутствующих языковых функций в старых средах.
  3. Исходные карты: Babel может генерировать исходные карты, которые позволяют вам отлаживать транспилированный код, как если бы это был исходный код.
  4. Пользовательские преобразования: Babel позволяет вам писать собственные плагины для преобразования вашего кода любым удобным для вас способом.
  5. Предустановки. Babel предоставляет набор предустановок, содержащих набор подключаемых модулей для поддержки определенной среды или варианта использования.
  6. Простая интеграция: Babel можно интегрировать с популярными инструментами сборки, фреймворками и библиотеками, такими как React, Angular, Vue, Webpack, Gulp и другими.
  7. Поддержка сообщества. У Babel большое и активное сообщество, которое способствует его развитию и оказывает поддержку пользователям.

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

Предустановка

В Babel пресет — это набор подключаемых модулей, которые предварительно настроены для поддержки определенной версии ECMAScript или конкретной среды. Предустановки позволяют разработчикам легко настраивать Babel для поддержки определенной версии JavaScript, конкретной платформы или библиотеки без необходимости вручную настраивать отдельные плагины.

Babel предоставляет несколько встроенных пресетов, таких как @babel/preset-env, который позволяет вам использовать последние функции ECMAScript, и @babel/preset-react, который позволяет вам использовать синтаксис JSX для компонентов React.

Например, если вы используете React, вы можете использовать @babel/preset-react, который автоматически включит необходимые плагины для синтаксиса JSX, свойств класса и других функций, специфичных для React.

Также можно создавать пользовательские пресеты, что позволяет разработчикам настраивать Babel с помощью определенного набора плагинов, адаптированных к потребностям их проекта.

Используя пресеты, разработчики могут сэкономить время и убедиться, что их код будет работать в предполагаемой среде, без необходимости вручную настраивать большое количество плагинов и управлять ими.

Таким образом, пресеты — это удобный способ настроить набор плагинов в одной строке, он делает процесс настройки проще, быстрее и эффективнее.

Плагины

У Babel есть множество плагинов, добавляющих транспайлеру дополнительные функции. Некоторые из самых популярных и полезных плагинов:

  1. @babel/preset-env: этот подключаемый модуль позволяет использовать новейшие функции ECMAScript путем их преобразования в версию, поддерживаемую вашей целевой средой. Он автоматически определяет необходимые преобразования на основе указанной вами среды.
  2. @babel/polyfill: этот подключаемый модуль предоставляет полифилл для новейших функций ECMAScript, которые доступны не во всех средах. Он включает такие функции, как Promise, Symbol, Array.from и Object.assign.
  3. @babel/plugin-transform-runtime: этот подключаемый модуль позволяет использовать помощники из пакета @babel/runtime без необходимости включать их в каждый файл. Это может уменьшить размер транспилируемого кода.
  4. @babel/plugin-proposal-class-properties: этот подключаемый модуль позволяет использовать свойства класса, функция, которая еще не является частью стандарта ECMAScript, но предлагается для будущих версий.
  5. @babel/plugin-proposal-decorators: этот плагин позволяет вам использовать синтаксис декоратора, который позволяет добавить дополнительное поведение классам и членам классов.
  6. @babel/plugin-transform-react-jsx: этот плагин позволяет вам использовать синтаксис JSX, который позволяет определять и отображать компоненты React.
  7. @babel/plugin-proposal-Optional-chaining: этот подключаемый модуль позволяет использовать необязательный оператор цепочки (?.), который можно использовать для безопасного доступа к свойствам глубоко вложенных объектов без необходимости проверки null или undefined на каждом уровне.
  8. @babel/plugin-syntax-dynamic-import: этот подключаемый модуль позволяет использовать синтаксис import() для динамического импорта, что позволяет загружать модули по мере их появления. необходимы, а не загружать их в начале скрипта.

Этапы

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

Этапы в Вавилоне:

  1. Этап 0: это этап соломенного человека, на котором обсуждается и уточняется идея функции.
  2. Этап 1. Это этап предложения, на котором функция рассматривается для включения в следующую версию ECMAScript. Он имеет четкое определение и реализацию прототипа.
  3. Этап 2: это черновой этап, когда функция считается готовой для включения в следующую версию ECMAScript. Он имеет полную спецификацию и реализацию прототипа.
  4. Этап 3: это этап-кандидат, на котором функция считается готовой для включения в следующую версию ECMAScript. Он имеет полную спецификацию, несколько реализаций и считается готовым к производству.
  5. Этап 4. Это завершенный этап, на котором функция считается готовой для включения в следующую версию ECMAScript. Он имеет полную спецификацию, несколько реализаций, считается готовым к производству и уже включен в стандарт ECMAScript.

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

Цель браузера

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

browser target указывается в файле .babelrc или в объекте конфигурации babel в инструменте сборки с использованием ключа "targets". Значением ключа "targets" может быть конкретная версия браузера, диапазон версий или список сред, таких как "chrome", "firefox", "ie", "ios", "android" и т. д.

Например, если вы хотите настроить таргетинг на две последние версии Chrome, вы можете установить ключ "targets" на "chrome: "last 2 versions". Это гарантирует, что код будет перенесен так, чтобы он правильно работал в последних двух версиях Chrome.

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

Существует несколько способов использования Babel в проектах, в зависимости от среды разработки и используемого инструмента сборки. Ниже приведены некоторые распространенные способы настройки Babel в проекте:

  1. Использование интерфейса командной строки Babel: Интерфейс командной строки Babel (CLI) можно установить глобально с помощью npm, а затем использовать для переноса файлов из командной строки. Вы можете установить Babel CLI с помощью команды npm install -g @babel/cli. После его установки вы можете использовать команду babel <input_file> -o <output_file> для переноса файла.
  2. Использование инструмента сборки. Многие инструменты сборки, такие как Webpack и Grunt, имеют плагины, которые интегрируются с Babel. Эти плагины позволяют транспилировать ваш код как часть процесса сборки. Например, вы можете использовать babel-loader для веб-пакета, чтобы транспилировать ваш код как часть процесса сборки веб-пакета.
  3. Использование средства запуска задач: средства выполнения задач, такие как gulp, можно настроить для использования Babel как части процесса сборки. Вы можете использовать пакет gulp-babel для переноса кода в рамках задачи gulp.
  4. Использование фреймворка. Некоторые фреймворки, такие как Create React App или NextJs, имеют встроенную поддержку Babel. Например, при создании нового проекта React с использованием create-react-app он автоматически настроит и использует Babel для переноса вашего кода.

Прежде чем начать использовать Babel, вам необходимо установить его, запустив

npm install --save-dev @babel/core @babel/cli @babel/preset-env

(или любой другой пресет, который вы предпочитаете) в корневом каталоге вашего проекта. Затем вы можете настроить Babel, создав файл .babelrc в корневом каталоге вашего проекта, и указать пресеты и плагины, которые вы хотите использовать.

{
    "presets": ["@babel/preset-env"]
}

Затем вы можете запустить следующую команду в терминале для переноса кода:

babel your_js_file.js --out-file transpiled_file.js

Это перенесет код в your_js_file.js и выведет транспилированный код в новый файл с именем transpiled_file.js.

Кроме того, вы можете использовать командную строку babel для переноса кода на лету, запустив:

babel your_js_file.js | node

Эта команда возьмет код из your_js_file.js, транспилирует его с помощью Babel, а затем направит вывод в команду узла для его выполнения.

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

Файлы конфигурации

  1. .babelrc: это наиболее часто используемый файл конфигурации для Babel. Это файл JSON, который можно поместить в корневой каталог проекта.
  2. babel.config.js: это файл JavaScript, который экспортирует объект конфигурации. Этот файл можно поместить в корневой каталог проекта.
  3. babel.config.json: аналог .babelrc, файл JSON.
  4. .babelrc.js : похож на babel.config.js, файл JavaScript.
  5. .babelrc.json : аналогичный .babelrc, файл JSON.

Содержимое файла конфигурации может содержать различные параметры и настройки конфигурации, такие как:

  1. Предустановки. Этот параметр указывает, какую предустановку или набор предустановок следует использовать при переносе кода. Например, вы можете использовать предустановку @babel/preset-env для переноса кода для определенной версии JavaScript или для определенного набора браузеров.
  2. Плагины. Этот параметр указывает, какие плагины использовать при переносе кода. Babel предлагает широкий спектр плагинов для различных функций, таких как JSX, Decorators и т. д.
  3. Исходные карты: этот параметр включает создание исходных карт при переносе кода.
  4. Игнорировать: этот параметр указывает Babel игнорировать определенные файлы или каталоги при транспиляции.

Пример

Вот пример некоторого кода JavaScript, использующего функции из ECMAScript 6 и 7, такие как стрелочные функции и деструктурирование:

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name); // "John"
console.log(age); // 30

Этот код можно транспилировать с помощью Babel, чтобы он был совместим со старыми средами JavaScript, которые не поддерживают эти функции. Вот результат после транспиляции того же кода с помощью Babel:

"use strict";

var numbers = [1, 2, 3, 4, 5];
var doubledNumbers = numbers.map(function (number) {
  return number * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

var person = {
  name: 'John',
  age: 30
};
var name = person.name,
    age = person.age;
console.log(name); // "John"
console.log(age); // 30

Как видите, Babel транспилировал стрелочные функции и деструктуризацию, чтобы использовать ключевое слово function и объявления переменных (var), которые поддерживаются в старых средах JavaScript.

Читать далее

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

Babel’s Playground — это ценный ресурс для разработчиков, которые хотят быть в курсе последних функций JavaScript. Благодаря интерактивному и удобному интерфейсу он позволяет легко тестировать и экспериментировать с различным синтаксисом ECMAScript и смотреть, как он транспилируется в версию, поддерживаемую более старыми средами.

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