关于前端:AST抽象语法树

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

什么是 AST

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

JavaScript AST 转换工具

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

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

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

如何将代码转换成 AST

在将代码转换成 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 插件手册

参考文章

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