Babel — обеспечение совместимости JavaScript: установка и примеры

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

Babel – это бесплатный транскомпилятор JavaScript с открытым исходным кодом, который в основном используется для преобразования кода ECMAScript 2015+ в обратную совместимую версию JavaScript, которая может выполняться старыми двигателями JavaScript.

Babel используется для:

• Использование новых функций: При новых версиях ECMAScript появляются новые функции и возможности. Babel позволяет использовать их в своем коде, даже если браузер не поддерживает эти функции.
• Модульная система: Введение стандарта ECMAScript 2015 (ES6) внесло изменения в систему модулей. Babel понимает и конвертирует новые импорты и экспорты, обеспечивая совместимость с предыдущими версиями JavaScript.
• Поддержка браузеров Одной из главных ролей Babel является преобразование кода так, чтобы он работал в старых версиях браузеров, которые могут не поддерживать новые функции ECMAScript.

Для установки Babel используйте npm, менеджер пакетов для Node.js. Предварительно у вас должен быть инициализирован npm проект, командой:

npm init -f

Далее установка самого babel

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

После установки Babel необходимо создать и настроить конфигурационный файл babel.config.json в корневой папке вашего проекта.

Правильный формат файла babel.config.js — это экспорт объекта через module.exports, например:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

В этом примере мы используем @babel/preset-env, который автоматически определяет набор функций, которые можно использовать исходя из спецификации ECMAScript и настроек браузера.

И запустив эту команду, чтобы скомпилировать весь ваш код из каталога src в dist:

./node_modules/.bin/babel src --out-dir dist

Вы также можете прописать эту команду в файл package.json пакета npm в разделе scripts:

  "scripts": {
    "build-js": "babel src --out-dir dist"
  },

и теперь для выполнения сборки js достаточно запустить команду:

npm run build-js
 
> 20.1_jquery@1.0.0 build-js
> babel src --out-dir dist
 
Successfully compiled 1 file with Babel (274ms)