[概念]Babel编译步骤基本流程与概念

解析(语法) (sytanx)

语法解析模块开始以字符流的形式阅读源码

• 标记有意义的字符串序列(token),例如目标源码中的token包括let、a、=、123、; (词法分析)

• 利用语法分析模块组合token间的关系,生成相应的节点(Node,Identifier...) (语法分析)

• 组合节点,生成抽象语法树AST

结构大概如下,忽略Position、Scope等等其他信息;

- Program
  - body [{
      - VariableDeclaration (kind:let)
        - declarations [{
            - VariableDeclarator 
                - id (name:"a")
                - init (value:"123")
        }]
  }]

转换 (transform)

这里转换成es5实际上就是把let转换成var

Program.body[0].kind = "var"

- Program
  - body [{
      - VariableDeclaration (kind:var)
        - declarations [{
            - VariableDeclarator 
                - id (name:"a")
                - init (value:"123")
        }]
  }]

生成

生成器再将AST转换成代码

var a = 123;

DONE!

参考文献与相关网址

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!