前端-体验js的ast树

是什么？

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

体验网站：https://esprima.org/demo/parse.html#

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

  1. {
  2.   "type": "Program",
  3.   "body": [
  4.     {
  5.       "type": "VariableDeclaration",
  6.       "declarations": [
  7.         {
  8.           "type": "VariableDeclarator",
  9.           "id": {
  10.             "type": "Identifier",
  11.             "name": "a"
  12.           },
  13.           "init": {
  14.             "type": "Literal",
  15.             "value": 1,
  16.             "raw": "1"
  17.           }
  18.         }
  19.       ],
  20.       "kind": "var"
  21.     }
  22.   ],
  23.   "sourceType": "script"
  24. }

上代码体验

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

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

  1. 得到var aa = 1的ast树
  2. 修改ast树
  3. 根据ast树生成js代码：const result = 1
  1. const esprima = require("esprima"); // 作用：根据ECMAScript(js)代码生成ast树
  2. const estraverse = require("estraverse"); // 作用：遍历ast树
  3. const escodegen = require("escodegen"); // 作用：根据ast树，生成 ECMAScript(js)代码
  5. let code = "var aa = 1";
  6. let tree = esprima.parseScript(code); // 根据ECMAScript(js)代码生成ast树
  8. // 遍历ast语法树
  9. estraverse.traverse(tree, {
  10.   enter(node) {
  11.     // console.log("enter", node);
  12.     if (node.kind === 'var') { // 把var换成const
  13.       node.kind = 'const'
  14.     }
  15.     if (node.type === 'VariableDeclarator') { // 修改变量名
  16.       node.id.name = node.id.name === 'aa' ? 'result' : node.id.name
  17.     }
  18.   },
  19.   leave(node) {
  20.     // console.log("leave", node);
  21.   }
  22. });
  24. // 根据ast树，生成 ECMAScript(js)代码
  25. let compileTreeJS = escodegen.generate(tree);
  26. console.log(compileTreeJS);
  27. // 输出： const result = 1;

应用广泛

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