简述babel解析过程

terrence386

发布于 2022-07-14 21:39:48

4310

发布于 2022-07-14 21:39:48

文章被收录于专栏：JavaScript高级程序设计JavaScript高级程序设计

月季的花期竟然这么长，五月都过完了，竟然还开着。

先要了解的概念

lisp-like function 和C-like function

如果对这两个概念不熟悉，这里有个简单的示例。假设我们有两个方法add和subtract，它们可能会被写成这样。

/**
 *                  LISP                      C
 *
 *   2 + 2          (add 2 2)                 add(2, 2)
 *   4 - 2          (subtract 4 2)            subtract(4, 2)
 *   2 + (4 - 2)    (add 2 (subtract 4 2))    add(2, subtract(4, 2))
 /

看起来很简单，虽然这个不是一个完整的LISP或C语法，它足以演示现代编译器的许多主要部分。

`编译器解析过程`

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

1.解析是将原始代码转换成更抽象的代码表示。

2.转换采用这种抽象表示和操作来完成编译器想的结果。

3.代码生成将转换后的内容解析成新代码。

`解析阶段`

解析阶段又可分为两个部分:词法分析和句法分析。

词法分析

Lexical Analysis(词法分析)将原始代码拆分成Tokens交给tokenizer(分词器)调用。Tokens是用来描述独立语法部分的小数组，它可以是数字，标签，标点符号，运算符等等。

句法分析

Syntactic Analysis(句法分析)将Tokens重新格式化为能够表示语法各个关系的一个东东。叫做abstract syntax tree(抽象语法树)。

抽象语法树(AST)，是一个嵌套很深的对象。它可以以一种既易于使用,又能告诉我们大量的代码信息。

例如:对于这个语法(add 2 (subtract 4 2))。Tokens可能是下面的内容

/*
   [
     { type: 'paren',  value: '('        },
     { type: 'name',   value: 'add'      },
     { type: 'number', value: '2'        },
     { type: 'paren',  value: '('        },
     { type: 'name',   value: 'subtract' },
     { type: 'number', value: '4'        },
     { type: 'number', value: '2'        },
     { type: 'paren',  value: ')'        },
     { type: 'paren',  value: ')'        },
   ]
*/

同时抽象语法树可能像这样:

/*
*   {
*     type: 'Program',
*     body: [{
*       type: 'CallExpression',
*       name: 'add',
*       params: [{
*         type: 'NumberLiteral',
*         value: '2',
*       }, {
*         type: 'CallExpression',
*         name: 'subtract',
*         params: [{
*           type: 'NumberLiteral',
*           value: '4',
*         }, {
*           type: 'NumberLiteral',
*           value: '2',
*         }]
*       }]
*     }]
*   }
*/

`转化阶段`

编译器接下来的阶段就是转化阶段了。这个阶段会将上一步获取的抽象语法树做一些改变。这个操作可以用同一种编成语言，也可以用其他编程语言。

你可能注意到，这个抽象语法树跟我们平时写的嵌套比较深的对象有些类似，每个对象都是一个抽象语法树的节点。

比如一个数字字面量的节点：

  {
    type: 'NumberLiteral',
    value: '2',
  }

或者一个表达式的节点:

   {
     type: 'CallExpression',
     name: 'subtract',
     params: [...nested nodes go here...],
   }

当我们对抽象语法树进行转换的时候，我们可以动态的添加，删除或者替换这些节点，或者我们可以直接clone一份对复制的对象进行修改。

Traversal(遍历)。在转换的过程中，我们需要以深度优先的方式遍历这个抽象语法树的每个节点。假设我们需要遍历如下的AST：

{
      type: 'Program',
      body: [{
        type: 'CallExpression',
        name: 'add',
        params: [{
          type: 'NumberLiteral',
          value: '2'
        }, {
          type: 'CallExpression',
          name: 'subtract',
          params: [{
            type: 'NumberLiteral',
            value: '4'
          }, {
            type: 'NumberLiteral',
            value: '2'
          }]
        }]
      }]
    }

过程可能如下: