javascript - babel 使用什么算法将简单的 div 转换为 x.createElement('div')？

Question

我很好奇 babel 的算法如何将 JSX 转换为

x.createElement(
  type,
  [props],
  [...children]
)

任何人都可以解释 babel 如何用于简单的 JSX div 吗？

<div id="hello-world" > Hello World </div>

标签： javascriptreactjsbabeljs

Answer 1

Babel 是一个编译器。没那么简单。

大多数编译器分为三个主要阶段：解析、转换和代码生成

1. 解析是获取原始代码并将其转换为代码的更抽象表示。（解析工作示例：here。继续，使用您的<div>示例。）

2. 转换采用这种抽象表示并进行操作以执行编译器希望它执行的任何操作。

3. 代码生成采用转换后的代码表示并将其转换为新代码。

有关编译器的快速教程，请参阅此。

Babel 内部工作的另一个重要资源。在这里。