前端-体验js的ast树

是什么？

源代码的 抽象语法结构的树状 表示

体验网站：esprima.org/demo/parse.…

比如 var a = 1 的 ast树(其中一种表达形式) 是

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

上代码体验

目标：把var aa = 1转换成const result = 1

思路：（js -> ast -> js）

1. 得到var aa = 1的ast树
2. 修改ast树
3. 根据ast树生成js代码：const result = 1

const esprima = require("esprima"); // 作用：根据ECMAScript(js)代码生成ast树
const estraverse = require("estraverse"); // 作用：遍历ast树
const escodegen = require("escodegen"); // 作用：根据ast树，生成 ECMAScript(js)代码

let code = "var aa = 1";
let tree = esprima.parseScript(code); // 根据ECMAScript(js)代码生成ast树

// 遍历ast语法树
estraverse.traverse(tree, {
  enter(node) {
    // console.log("enter", node);
    if (node.kind === 'var') { // 把var换成const
      node.kind = 'const'
    }
    if (node.type === 'VariableDeclarator') { // 修改变量名
      node.id.name = node.id.name === 'aa' ? 'result' : node.id.name
    }
  },
  leave(node) {
    // console.log("leave", node);
  }
});

// 根据ast树，生成 ECMAScript(js)代码
let compileTreeJS = escodegen.generate(tree);
console.log(compileTreeJS);
// 输出： const result = 1;

应用广泛

1. 浏览器、智能编译器的 代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等
   • 如eslint对代码错误或风格的检查，发现一些潜在的错误
   • IDE的错误提示、格式化、高亮、自动补全等等
2. 代码混淆压缩
   • UglifyJS等
3. 优化变更代码，改变代码结构使达到想要的结构
   • babel
   • 代码打包工具webpack、rollup等等
   • CommonJS、AMD、CMD、UMD等代码规范之间的转化
   • TypeScript、JSX等转化为原生Javascript
   • vue.js当中也应用了这个思想，比如我们在代码中编写的template（html）转化成render function的过程当中第一步就是解析html字符串生成AST