Компилятор Babel

babel логотип

Что такое Babel?

Babel - компилятор JavaScript

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

  • Синтаксис преобразования
  • Функции Polyfill, отсутствующие в вашей целевой среде (через @babel/polyfill)
  • Преобразования исходного кода (codemods)
  • И многое другое.
// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

ES2015 и последующие версии

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

JSX и React

Babel может преобразовывать синтаксис JSX! Ознакомьтесь с нашей предустановкой для React, чтобы начать работу. Используйте его вместе с пакетом babel-sublime, чтобы вывести подсветку синтаксиса на совершенно новый уровень.

Вы можете установить эту предустановку с помощью

npm install --save-dev @babel/preset-react

и добавьте @babel/preset-react в конфигурацию Babel.

export default React.createClass({
  getInitialState() {
    return { num: this.getRandomNumber() };
  },

  getRandomNumber() {
    return Math.ceil(Math.random() * 6);
  },

  render() {
    return <div>
      Your dice roll:
      {this.state.num}
    </div>;
  }
});

Type Annotations (Flow и TypeScript)

Babel может удалять аннотации типов! Чтобы начать работу, воспользуйтесь нашей предустановкой Flow или предустановкой TypeScript. Помните, что Babel не выполняет проверку типов; вам все равно придется установить и использовать Flow или TypeScript для проверки типов.

Вы можете установить предварительную настройку потока с помощью

npm install --save-dev @babel/preset-flow

// @flow
function square(n: number): number {
  return n * n;
}

или используйте пресет

npm install --save-dev @babel/preset-typescript

function Greeter(greeting: string) {
    this.greeting = greeting;
}

Подключаемые

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

// A plugin is just a function
export default function ({types: t}) {
  return {
    visitor: {
      Identifier(path) {
        let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = name.split('').reverse().join('');
      }
    }
  };
}

Отлаживаемый

Поддержка карты исходных текстов, что позволяет легко отлаживать скомпилированный код.

Соответствие стандарту

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

Компактный

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

Источники