Я уверен, что вы заинтересованы в ES6, поддержке JSX и т. д.
Поэтому я разработал это вступление, чтобы вы могли быстро и ясно освоиться (надеюсь!)

Это самое краткое введение во все, что вам нужно знать о Babel.

Интерлюдия

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

Высокоуровневая архитектура Babel разбита на два основных пакета:

  • babel-cli — помогает запустить babel из командной строки для компиляции файл за файлом.
  • babel-core — основная библиотека babel для Node.js.

Существует много других модулей npm, которые представляют собой интеграции, такие как gulp-babel или babel-loaderдля веб-пакета. а также наборы трансформаций Babel, такие как babel-preset-es2015и так далее. Мы коснемся последнего через секунду.

Кратко о том, как работает Babel

Babel — это просто компилятор.
У него есть 3 этапа, на которых все происходит:

  1. Парсинг — штука, которая умеет парсить код JavaScript. По умолчанию это то, что Babel делает в своем ядре.
  2. Преобразование — штука, умеющая применять любые преобразования на основе проанализированных данных. Например:
    const h = 'hello' и преобразование в var h = 'hello'.
  3. Генерация — Применяет сгенерированные преобразования.

Модульность Бабеля

Плагины, пресеты и полифилы:

  • Плагины — плагины представляют собой определенный набор преобразований, которые применяются к синтаксису. Например, поддержка стрелочных функций в ES6. Как вы можете себе представить, существует множество плагинов, созданных для охвата всего ES6.
  • Пресеты — пресеты — это просто набор плагинов. Это просто набор плагинов, без лишнего сахара.
  • Поллифилы — это плагины, которые полифицируют определенный набор функций, которые еще не доступны в среде выполнения, поэтому требуют фактической реализации. Например: Object.assign в ES6.

Ресурсы

Узнайте больше о Вавилоне:



Плагины · Babel
Компилятор для написания JavaScript следующего поколенияbabeljs.io



Хотите узнать больше о таких компиляторах, как Babel? посмотрите следующий проект:



thejameskyle/the-super-tiny-compiler
the-super-tiny-compiler - :snowman: Возможно, самый маленький компиляторgithub.com