safekodo在线将AST语法树编译为js代码

西红柿炒番茄盖浇饭 • 2023-01-02 • 云技术社区 • 496 阅读

AST 抽象语法树（Abstract Syntax Tree）也称为AST语法树，指的是源代码语法所对应的树状结构。也就是说，对于一种具体编程语言下的源代码，通过构建语法树的形式将源代码中的语句映射到树中的每一个节点上。

在使用JavaScript开发过程中，虽然并不会直接与AST直接打交道，但许多打包相关的插件都会涉及到它，例如使用bable对代码进行转换，ts类型检查，语法高亮，使用UglifyJS来压缩代码，使用www.safekodo.com来进行代码混淆加密，css预处理器、elint、pretiier，等。有很多js模块我们不会在生产环境用到，但是它们在我们的开发过程中充当着重要的角色。所有的上述工具，不管怎样，都建立在了AST这个巨人的肩膀上。等，实际这背后就是在对JavaScript的抽象语法树进行操作。

在线 JS转AST语法树在线转换JS=>AST

下面利用safekodo提供的网页版ast解析器解析演示

原程序

console.log("www.safekodo.com  在线JavaScript代码转AST");

使用safekodo提供的网页版ast解析器

解析后的AST

 {
  "type": "File",
  "start": 0,
  "end": 51,
  "loc": {
    "start": {
      "line": 1,
      "column": 0,
      "index": 0
    },
    "end": {
      "line": 1,
      "column": 51,
      "index": 51
    }
  },
  "errors": [],
  "program": {
    "type": "Program",
    "start": 0,
    "end": 51,
    "loc": {
      "start": {
        "line": 1,
        "column": 0,
        "index": 0
      },
      "end": {
        "line": 1,
        "column": 51,
        "index": 51
      }
    },
    "sourceType": "module",
    "interpreter": null,
    "body": [
      {
        "type": "ExpressionStatement",
        "start": 0,
        "end": 51,
        "loc": {
          "start": {
            "line": 1,
            "column": 0,
            "index": 0
          },
          "end": {
            "line": 1,
            "column": 51,
            "index": 51
          }
        },
        "expression": {
          "type": "CallExpression",
          "start": 0,
          "end": 51,
          "loc": {
            "start": {
              "line": 1,
              "column": 0,
              "index": 0
            },
            "end": {
              "line": 1,
              "column": 51,
              "index": 51
            }
          },
          "callee": {
            "type": "MemberExpression",
            "start": 0,
            "end": 11,
            "loc": {
              "start": {
                "line": 1,
                "column": 0,
                "index": 0
              },
              "end": {
                "line": 1,
                "column": 11,
                "index": 11
              }
            },
            "object": {
              "type": "Identifier",
              "start": 0,
              "end": 7,
              "loc": {
                "start": {
                  "line": 1,
                  "column": 0,
                  "index": 0
                },
                "end": {
                  "line": 1,
                  "column": 7,
                  "index": 7
                },
                "identifierName": "console"
              },
              "name": "console"
            },
            "computed": false,
            "property": {
              "type": "Identifier",
              "start": 8,
              "end": 11,
              "loc": {
                "start": {
                  "line": 1,
                  "column": 8,
                  "index": 8
                },
                "end": {
                  "line": 1,
                  "column": 11,
                  "index": 11
                },
                "identifierName": "log"
              },
              "name": "log"
            }
          },
          "arguments": [
            {
              "type": "StringLiteral",
              "start": 12,
              "end": 50,
              "loc": {
                "start": {
                  "line": 1,
                  "column": 12,
                  "index": 12
                },
                "end": {
                  "line": 1,
                  "column": 50,
                  "index": 50
                }
              },
              "extra": {
                "rawValue": "www.safekodo.com  在线JavaScript代码转AST",
                "raw": "\\"www.safekodo.com  在线JavaScript代码转AST\\""
              },
              "value": "www.safekodo.com  在线JavaScript代码转AST"
            }
          ]
        }
      }
    ],
    "directives": []
  },
  "comments": []
}
展开

对AST做修改得到以下新的AST

{
  "type": "File",
  "start": 0,
  "end": 51,
  "loc": {
    "start": {
      "line": 1,
      "column": 0,
      "index": 0
    },
    "end": {
      "line": 1,
      "column": 51,
      "index": 51
    }
  },
  "errors": [],
  "program": {
    "type": "Program",
    "start": 0,
    "end": 51,
    "loc": {
      "start": {
        "line": 1,
        "column": 0,
        "index": 0
      },
      "end": {
        "line": 1,
        "column": 51,
        "index": 51
      }
    },
    "sourceType": "module",
    "interpreter": null,
    "body": [
      {
        "type": "ExpressionStatement",
        "start": 0,
        "end": 51,
        "loc": {
          "start": {
            "line": 1,
            "column": 0,
            "index": 0
          },
          "end": {
            "line": 1,
            "column": 51,
            "index": 51
          }
        },
        "expression": {
          "type": "CallExpression",
          "start": 0,
          "end": 51,
          "loc": {
            "start": {
              "line": 1,
              "column": 0,
              "index": 0
            },
            "end": {
              "line": 1,
              "column": 51,
              "index": 51
            }
          },
          "callee": {
            "type": "MemberExpression",
            "start": 0,
            "end": 11,
            "loc": {
              "start": {
                "line": 1,
                "column": 0,
                "index": 0
              },
              "end": {
                "line": 1,
                "column": 11,
                "index": 11
              }
            },
            "object": {
              "type": "Identifier",
              "start": 0,
              "end": 7,
              "loc": {
                "start": {
                  "line": 1,
                  "column": 0,
                  "index": 0
                },
                "end": {
                  "line": 1,
                  "column": 7,
                  "index": 7
                },
                "identifierName": "console"
              },
              "name": "console"
            },
            "computed": false,
            "property": {
              "type": "Identifier",
              "start": 8,
              "end": 11,
              "loc": {
                "start": {
                  "line": 1,
                  "column": 8,
                  "index": 8
                },
                "end": {
                  "line": 1,
                  "column": 11,
                  "index": 11
                },
                "identifierName": "log"
              },
              "name": "log"
            }
          },
          "arguments": [
            {
              "type": "StringLiteral",
              "start": 12,
              "end": 50,
              "loc": {
                "start": {
                  "line": 1,
                  "column": 12,
                  "index": 12
                },
                "end": {
                  "line": 1,
                  "column": 50,
                  "index": 50
                }
              },
              "extra": {
                "rawValue": "www.safekodo.com",
                "raw": "\\"www.safekodo.com\\""
              },
              "value": "www.safekodo.com"
            }
          ]
        }
      }
    ],
    "directives": []
  },
  "comments": []
}
展开