JS编译——AST

JS编译——AST

AST

抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

在JavaScript中，虽然我们并不会常常与AST直接打交道，但却也会经常的涉及到它。例如使用UglifyJS来压缩代码，bable对代码进行转换，ts类型检查，语法高亮等，实际这背后就是在对JavaScript的抽象语法树进行操作。

AST在线转换器

转换解析流程

1. 生成AST：词法解析、语法解析
2. 遍历和更新AST
3. 将AST重新生成源码

下面利用esprima引擎做的解析

原程序

let code = 'const a = 1';

解析后的AST

Script {
  type: 'Program',
  body:
   [ VariableDeclaration {
       type: 'VariableDeclaration',
       declarations: [Array],
       kind: 'const' } ],
  sourceType: 'script' }

对AST做遍历、修改

const estraverse = require('estraverse');

estraverse.traverse(ast, {
    enter: function (node) {
        node.kind = "var";
    }
});

生成新的AST

Script {
  type: 'Program',
  body:
   [ VariableDeclaration {
       type: 'VariableDeclaration',
       declarations: [Array],
       kind: 'var' } ],
  sourceType: 'script' }

生成新的源码

const escodegen = require("escodegen");
const transformCode = escodegen.generate(ast)

//var a = 1;

参考

一看就懂的JS抽象语法树
AST 原理分析
AST in JS