Что такое Babel?

Babel — это компилятор JavaScript​

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

• Преобразование синтаксиса
• Полифиллинг функций, отсутствующих в вашей целевой среде (через сторонний полифилл, такой как core-js)
• Преобразования исходного кода (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;
});

Для замечательного учебника по компиляторам, ознакомьтесь с the-super-tiny-compiler, который также объясняет, как работает сам Babel на высоком уровне.

ES2015 и новее​

Babel поддерживает последнюю версию JavaScript с помощью синтаксических преобразователей.

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

JSX и React​

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

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

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

yarn add --dev @babel/preset-react

pnpm add --save-dev @babel/preset-react

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

export default function DiceRoll(){
  const getRandomNumber = () => {
    return Math.ceil(Math.random() * 6);
  };

  const [num, setNum] = useState(getRandomNumber());

  const handleClick = () => {
    const newNum = getRandomNumber();
    setNum(newNum);
  };

  return (
    <div>
      Your dice roll: {num}.
      <button onClick={handleClick}>Click to get a new number</button>
    </div>
  );
};

Узнайте больше о JSX

Аннотации типов (Flow и TypeScript)​

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

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

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

yarn add --dev @babel/preset-flow

pnpm add --save-dev @babel/preset-flow

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

или пресет TypeScript с помощью

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

yarn add --dev @babel/preset-typescript

pnpm add --save-dev @babel/preset-typescript

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

Узнайте больше о Flow и TypeScript

Подключаемые модули​

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

Создайте плагин на лету с помощью astexplorer.net или используйте generator-babel-plugin для генерации шаблона плагина.

// 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]
          .reverse()
          .join("");
      },
    },
  };
}

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

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

Соответствующий спецификации​

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

Компактный​

Babel пытается использовать наименьшее количество кода без зависимости от громоздкого времени выполнения.

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