AST学习二----babel库使用

1.@babel/traverse

@babel/traverse 是一个用于对抽象语法树(AST)进行递归遍历和更新的工具库，它可以通过访问和修改 AST 节点来实现代码转换。

下面是一个简单的示例代码，其中包含了使用 @babel/parser 将 JavaScript 代码解析为 AST，并使用 @babel/traverse 对 AST 进行遍历和更新的过程。

const parser = require("@babel/parser");
const generator = require("@babel/generator").default
const traverse = require("@babel/traverse").default;

// 将 JavaScript 代码解析为 AST
const ast = parser.parse(`
  const double = x => x * 2;
  const result = double(3);
`);

// 遍历 AST，并对所有函数调用进行修改
traverse(ast, {
    CallExpression(path){
        if (path.node.callee.name === "double") {
            path.node.callee.name = "triple";
            console.log(path.node.arguments[0])
            path.node.arguments[0] = {
               type: 'NumericLiteral',
                value: path.node.arguments[0].value  * 2,
            };
        };
    },
});
// 将修改之后的AST转换为 JavaScript代码
const code = generator(ast).code;
console.log(code);

2.将var 关键字替换成 let关键字。

const {parse} = require('@babel/parser')
const traverse = require('@babel/traverse').default
const generator = require("@babel/generator").default

const code = `
  var a = 111;
  var b = 222;
  var c = a + b;
`;
// 将JavaScript代码转化成 AST
const ast = parse(code)

// 遍历AST,将所有的 var 声明替换成 let声明
traverse(ast,{
    VariableDeclaration(path) {
        if (path.node.kind === 'var') {
            path.node.kind = 'let'
        }
    },
})

// 将修改之后的 AST 转换回 JavaScrtpt 代码
const output = generator(ast, {} ,code);
console.log(output.code);

3.将AST转成JavaScript代码

通过@babel/generator可以将修改之后的AST代码转成js代码,示例如下

const gennerator = require('@babel/generator').default

const ast = {
        "type": "File",
        "start": 0,
        "end": 16,
        "loc": {
         "start": {
          "line": 1,
          "column": 0,
          "index": 0
         },
         "end": {
          "line": 1,
          "column": 16,
          "index": 16
         }
        },
        "errors": [],
        "program": {
         "type": "Program",
         "start": 0,
         "end": 16,
         "loc": {
          "start": {
           "line": 1,
           "column": 0,
           "index": 0
          },
          "end": {
           "line": 1,
           "column": 16,
           "index": 16
          }
         },
         "sourceType": "script",
         "interpreter": null,
         "body": [
          {
           "type": "VariableDeclaration",
           "start": 0,
           "end": 16,
           "loc": {
            "start": {
             "line": 1,
             "column": 0,
             "index": 0
            },
            "end": {
             "line": 1,
             "column": 16,
             "index": 16
            }
           },
           "declarations": [
            {
             "type": "VariableDeclarator",
             "start": 6,
             "end": 15,
             "loc": {
              "start": {
               "line": 1,
               "column": 6,
               "index": 6
              },
              "end": {
               "line": 1,
               "column": 15,
               "index": 15
              }
             },
             "id": {
              "type": "Identifier",
              "start": 6,
              "end": 7,
              "loc": {
               "start": {
                "line": 1,
                "column": 6,
                "index": 6
               },
               "end": {
                "line": 1,
                "column": 7,
                "index": 7
               },
               "identifierName": "x"
              },
              "name": "x"
             },
             "init": {
              "type": "BinaryExpression",
              "start": 10,
              "end": 15,
              "loc": {
               "start": {
                "line": 1,
                "column": 10,
                "index": 10
               },
               "end": {
                "line": 1,
                "column": 15,
                "index": 15
               }
              },
              "left": {
               "type": "NumericLiteral",
               "start": 10,
               "end": 11,
               "loc": {
                "start": {
                 "line": 1,
                 "column": 10,
                 "index": 10
                },
                "end": {
                 "line": 1,
                 "column": 11,
                 "index": 11
                }
               },
               "extra": {
                "rawValue": 1,
                "raw": "1"
               },
               "value": 1
              },
              "operator": "+",
              "right": {
               "type": "NumericLiteral",
               "start": 14,
               "end": 15,
               "loc": {
                "start": {
                 "line": 1,
                 "column": 14,
                 "index": 14
                },
                "end": {
                 "line": 1,
                 "column": 15,
                 "index": 15
                }
               },
               "extra": {
                "rawValue": 2,
                "raw": "2"
               },
               "value": 2
              }
             }
            }
           ],
           "kind": "const"
          }
         ],
         "directives": []
        },
        "comments": []
}
const code = gennerator(ast, {}, '');
console.log(code.code)

今天学习到这里了,明天继续加油!
(不积跬步无以至千里,共勉)