关于前端:AST抽象语法树

作为一个前端同学，不论你是否晓得 AST 是个什么货色，但一点也不影响你在工作中应用它。咱们平时我的项目中用到的 less、babel、eslint、代码压缩以及JavaScript 代码可能运行在浏览器中等，都是建设在 AST 的根底上。在理解了 AST 相干常识后，你也能够本人折腾点货色进去，给枯燥无聊的工作找点乐趣。

AST（Abstract Syntax Tree），中文叫做形象语法树，是源代码语法结构的一种形象示意。它以树状的模式体现编程语言的语法结构，树上的每个节点都示意源代码中的一种构造。之所以说语法 ” 形象 ” 的，是因为这里的语法并不会示意出实在语法中呈现的每个细节。比方，嵌套括号被隐含在树的构造中，并没有以节点的模式出现；而相似于 if-condition-then 这样的条件跳转语句，能够应用带有三个分支的节点来示意。（以上概念来自维基百科）。

对于 JavaScript 而言，能够通过 JS Parser 将JS代码转换成 AST。目前比拟常见的JS Parser 如下：

esprima（风行库）
Babylon（babel 中应用）
acorn（webpack 中应用）
espree（在 acorn 根底上衍生而来，eslint 中应用）
astexplorer（在线生成工具，可选不同的 JS Parser 实时查看）

本文中的例子均是应用 esprima 来实现。

在将代码转换成 AST 的过程中，有两个重要的阶段：词法剖析（Lexical Analysis）和 语法分析（Syntax Analysis）。

词法剖析

也称为分词，是将字符串模式的代码转换为标记（token）序列的过程。这里的 token 是一个字符串，是形成源代码的最小单位，相似于英语中单词。词法剖析也能够了解成将英文字母组合成单词的过程。词法剖析过程中不会关怀单词之间的关系。比方：词法剖析过程中可能将括号标记成token，但并不会校验括号是否匹配。

JavaScript中的 token 次要蕴含以下几种：

关键字：var、let、const 等

标识符：没有被引号括起来的间断字符，可能是一个变量，也可能是 if、else 这些关键字，又或者是 true、false 这些内置常量

运算符：+、-、*、/ 等

数字：像十六进制，十进制，八进制以及迷信表达式等

字符串：变量的值等

空格：间断的空格，换行，缩进等

正文：行正文或块正文都是一个不可拆分的最小语法单元

标点：大括号、小括号、分号、冒号等

以下是 const a = 'hello world' 通过 esprima 词法剖析后生成的tokens。

[
    {
        "type": "Keyword",
        "value": "const"
    },
    {
        "type": "Identifier",
        "value": "a"
    },
    {
        "type": "Punctuator",
        "value": "="
    },
    {
        "type": "String",
        "value": "'hello world'"
    }
]

语法分析

也称为解析器，是将词法剖析产生的 token 依照某种给定的模式文法转换成 AST 的过程。也就是把单词组合成句子的过程。在转换过程中会验证语法，语法如果有错的话，会抛出语法错误。

上述 const a = 'hello world' 通过语法分析后生成的 AST 如下：

{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "a"
          },
          "init": {
            "type": "Literal",
            "value": "hello world",
            "raw": "'hello world'"
          }
        }
      ],
      "kind": "const"
    }
  ],
  "sourceType": "script"
}

在拿到了 AST 后，咱们就能够剖析AST，在此基础上做一些本人的事件。比方最简略的将代码中的某一变量都替换成另一个名字。

上面咱们来实现将上述代码中定义的变量 a 替换成变量 b。要实现这个需要，咱们须要将源代码转换成AST，而后在此基础上进行一些操作，更改树的内容，之后再把AST 转换成指标代码。也就是要经验 解析 -> 转换 -> 生成 的过程。

首先咱们须要剖析源代码生成的 AST 和指标代码生成的 AST 具体有何不同。
以下是 const b = 'hello world' 生成的 AST：

{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "b" // 这里不同
          },
          "init": {
            "type": "Literal",
            "value": "hello world",
            "raw": "'hello world'"
          }
        }
      ],
      "kind": "const"
    }
  ],
  "sourceType": "script"
}

通过比照剖析，发现惟一的不同就是 type 为Identifier的 id 的name属性值不一样。接下来就能够通过批改 AST 来实现咱们的需要了。

咱们须要装置 estraverse（遍历 AST）和 escodegen（依据 AST 生成 JS）这两个包。

const esprima = require('esprima');
const estraverse = require('estraverse');
const escodegen = require('escodegen');

const program = "const a ='hello world'";
const ASTree = esprima.parseScript(program);

estraverse.traverse(ASTree, {enter(node) {changeAToB(node);
    }
});

const ASTreeAfterChange = escodegen.generate(tree);
console.log(ASTreeAfterChange); // const b = 'hello world'

function changeAToB(node) {if (node.type === 'Identifier') {node.name = 'b';}
}

看，是不是很容易就能够实现。把握了 AST 的常识后，咱们能做很多事件，各种 babel 的插件也是这么产生的，只不过用的库不一样。

如何实现一个 babel 插件能够参考官网 Babel 插件手册

【你应该理解的】形象语法树 AST
平庸前端码农之变质 — AST
Babel 插件手册

关于前端:AST抽象语法树

什么是 AST

JavaScript AST 转换工具

如何将代码转换成 AST

词法剖析

语法分析

实际

参考文章