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");
解析后的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
THE END
0
二维码
海报
safekodo在线将AST语法树编译为js代码
在使用JavaScript开发过程中，虽然并不会直接与AST直接打交道，但许多打包相关的插件都会涉及到它，例如使用bable对代码进行转换，ts类型检查，语法高...
