AST抽象语法树编译与反编译

JavaScript 解析器

babel是一个javascript编译器

1. @babel/parser

将 JSCode 编译成 AST抽象语法树

var age = 18;

require("@babel/parser").parse(`var age = 18;`)


{
    "type": "File",
    "start": 0,
    "end": 31,
    "errors": [],
    "program": {
        "type": "Program",
        "sourceType": "script",
        "interpreter": null,
        "body": [
            {
                "type": "VariableDeclaration",
                "declarations": [
                    {
                        "type": "VariableDeclarator",
                        "id": {
                            "type": "Identifier",
                            "name": "age"
                        },
                        "init": {
                            "type": "NumericLiteral",
                            "extra": {
                                "rawValue": 18,
                                "raw": "18"
                            },
                            "value": 18
                        }
                    }
                ],
                "kind": "var"
            }
        ],
        "directives": []
    },
    "comments": []
}

2. @babel/traverse

遍历AST抽象语法树

 traverse(ast, {
   enter(path) {
     // 删除节点的某部分属性
     delete path.node.loc;
     delete path.parent.loc;
     delete path.node.start;
     delete path.node.end;
   }
 });

3. @babel/generator

将AST抽象语法树转换成JSCode

const output = generate(
  ast,
  {
    retainLines: true, // 保留行号
  }
);
console.log(output) // var age = 18;