什么是Babel

• 什么是Babel?

  • Babel 是我们知道的将 ES6、ES7等代码转译为 ES5 代码且能安全稳定运行最好的工具
  • 同时它允许开发者开发插件， 能够在编译时期转换 JavaScript 的结构。

  Babel概述：

• 我们需要知道3个Babel处理流程中的重要工具；

  • 解析
    • Babylon 是一个解析器，它可以将javascript字符串，转化为更加友好的表现形式，称之为抽象语法树；
    • 在解析过程中有两个阶段： 词法分析 和 语法分析 ，
      • 词法分析阶段：字符串形式的代码转换为令牌（tokens）流,令牌类似于AST中的节点；
      • 语法分析阶段：把一个令牌流转化为AST的形式，同时这个阶段会把令牌中的信息转化为AST的表述结构
  • 转换
    • babel-traverse 模块允许你浏览、分析和修改抽象语法树（AST Abstract Syntax Tree）
      • Babel接收解析得到的AST并通过babel-traverse对其进行深度优先遍历，在此过程中对节点进行添加、更新及移除操作。
  • 生成
    • babel-generator 模块用来将转换后的抽象语法树（AST Abstract Syntax Tree）转化为Javascript 字符串
      • 将经过转换的AST通过babel-generator再转换为js代码，过程及时深度遍历整个AST,然后构建转换后的代码字符串。

Babel 中重要的对象Vistor

babel在处理一个节点时，是以访问者的形式获取节点的信息，并进行相关的操作，这种操作是通过visitor对象实现的。
复制代码

在visitor中定义了处理不同节点的函数。

    visitor: {
        Program: {
            enter(path, state) {
                console.log('start processing this module...');
            },
            exit(path, state) {
                console.log('end processing this module!');
            }
        },
        ImportDeclaration:{
            enter(path, state) {
                console.log('start processing ImportDeclaration...');
                // do something
            },
            exit(path, state) {
                console.log('end processing ImportDeclaration!');
                // do something
            }
        }
    }
复制代码

什么是AST

• 什么是AST?

  • AST (Abstract Syntax Tree)是抽象语法树英文的缩写，AST语法树每一层都拥有相同的结构，这样的每一层结构也被叫做节点（Node）。
  • AST 是源代码的抽象语法结构树状表现形式，Webpack、ESLint、JSX、TypeScript 的编译和模块化规则之间的转化都是通过 AST 来实现对代码的检查、分析以及编译等操作。
  • 一个 AST 可以由单一的节点或是成百上千个节点构成。 它们组合在一起可以描述用于静态分析的程序语法。

• Javascript 语法的AST（抽象语法树）