Как работает babel?

Question

[Riman]

В документе есть jsx, в какой момент парсинга документа вступает в игру babel? Что конкретно он делает (основные шаги), Перед каким- следующим действием браузера заканчивается работа babel?

Answer 1

[Максим]

Код рендера вашего реакт-компонента, должен выглядеть так

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

Babel из JSX превращает это в то что выше. На какой стадии? Думаю на стадии формирования бандла.

Документация JSX->JS

Answer 2

[Роман Александрович]

https://learn.javascript.ru/es-modern-usage

Comments

[Максим]

Роман Александрович я так понял, что в вопросе не рассматривается, как превращается es2015+ код в старый код. Автор хочет узнать, как превращается JSX..

[Riman]

Максим, ок, конкретный синтаксис - не имеет значения, полагаю, перед тем как интерпретатор построит AST, babel откомпилирует одно в другое, не понятен сам принцип работы babel, то есть интерпретатор видит, положим jsx и что конкретно дальше по шагам - неизвестность!

[Роман Александрович]

Riman, думаю вам на этот вопрос точно ответят только разработчики. Им точно известен последовательность и все процессы. Или же вы можете залезть сами в библиотеку и попытаться разобраться.