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

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": []
}

ast转js

在通过safekodo提供的网页版ast代码转js工具将修改后的ast代码转为js

版权声明:
作者:西红柿炒番茄盖浇饭
链接:https://jkboy.com/archives/12643.html
来源:随风的博客
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
海报
safekodo在线将AST语法树编译为js代码
在使用JavaScript开发过程中,虽然并不会直接与AST直接打交道,但许多打包相关的插件都会涉及到它,例如使用bable对代码进行转换,ts类型检查,语法高...
<<上一篇
下一篇>>