非常棒的在线AST浏览器
https://astexplorer.net/
源码：https://github.com/fkling/astexplorer
一、支持开发语言
- CSS:
- GraphQL
- Graphviz:
- Handlebars:
- HTML:
- Vue:
- ICU
- Java
- JavaScript:
- JSON:
- Lua:
- Markdown:
- MDX:
- PHP
- Pug
- Regular Expressions:
- Scala
- Solidity:
- SQL:
- WebIDL
- YAML:
二、示例
1、vue
- @vue/compiler-dom
- vue-eslint-parser
- vue-template-compiler
源码：
<template>
<p>{{ greeting }} World!</p>
</template>
<script>
export default {
data () {
return {
greeting: "Hello"
};
}
};
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
解析的语法树json太长就不做展示了：
image.png
2、JavaScript
- babel-plugin-macros
- babelv7
- eslint-v4
- jscodeshift
- prettier
- tslint
支持的语法格式
- acorn
- @babel/eslint-parser
- babel-eslint9
- @babel/parser
- esformatter
- espree
- esprima
- flow
- meriyah
- recast
- seafox
- shift
- tenko
- traceur
- @typescript-eslint/parser
- typescript
- uglify-js
- 例如：
typescript源码：
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
- 解析后的语法树
{
"type": "Program",
"start": 0,
"end": 528,
"body": [
{
"type": "ImportDeclaration",
"start": 0,
"end": 30,
"specifiers": [
{
"type": "ImportDefaultSpecifier",
"start": 7,
"end": 11,
"local": {
"type": "Identifier",
"start": 7,
"end": 11,
"name": "logo"
}
}
],
"source": {
"type": "Literal",
"start": 17,
"end": 29,
"value": "./logo.svg",
"raw": "'./logo.svg'"
}
},
{
"type": "ImportDeclaration",
"start": 31,
"end": 50,
"specifiers": [],
"source": {
"type": "Literal",
"start": 38,
"end": 49,
"value": "./App.css",
"raw": "'./App.css'"
}
},
{
"type": "FunctionDeclaration",
"start": 52,
"end": 506,
"id": {
"type": "Identifier",
"start": 61,
"end": 64,
"name": "App"
},
"expression": false,
"generator": false,
"async": false,
"params": [],
"body": {
"type": "BlockStatement",
"start": 67,
"end": 506,
"body": [
{
"type": "ReturnStatement",
"start": 71,
"end": 504,
"argument": {
"type": "JSXElement",
"start": 84,
"end": 499,
"openingElement": {
"type": "JSXOpeningElement",
"start": 84,
"end": 105,
"attributes": [
{
"type": "JSXAttribute",
"start": 89,
"end": 104,
"name": {
"type": "JSXIdentifier",
"start": 89,
"end": 98,
"name": "className"
},
"value": {
"type": "Literal",
"start": 99,
"end": 104,
"value": "App",
"raw": "\"App\""
}
}
],
"name": {
"type": "JSXIdentifier",
"start": 85,
"end": 88,
"name": "div"
},
"selfClosing": false
},
"closingElement": {
"type": "JSXClosingElement",
"start": 493,
"end": 499,
"name": {
"type": "JSXIdentifier",
"start": 495,
"end": 498,
"name": "div"
}
},
"children": [
{
"type": "JSXText",
"start": 105,
"end": 112,
"value": "\n ",
"raw": "\n "
},
{
"type": "JSXElement",
"start": 112,
"end": 488,
"openingElement": {
"type": "JSXOpeningElement",
"start": 112,
"end": 143,
"attributes": [
{
"type": "JSXAttribute",
"start": 120,
"end": 142,
"name": {
"type": "JSXIdentifier",
"start": 120,
"end": 129,
"name": "className"
},
"value": {
"type": "Literal",
"start": 130,
"end": 142,
"value": "App-header",
"raw": "\"App-header\""
}
}
],
"name": {
"type": "JSXIdentifier",
"start": 113,
"end": 119,
"name": "header"
},
"selfClosing": false
},
"closingElement": {
"type": "JSXClosingElement",
"start": 479,
"end": 488,
"name": {
"type": "JSXIdentifier",
"start": 481,
"end": 487,
"name": "header"
}
},
"children": [
{
"type": "JSXText",
"start": 143,
"end": 152,
"value": "\n ",
"raw": "\n "
},
{
"type": "JSXElement",
"start": 152,
"end": 202,
"openingElement": {
"type": "JSXOpeningElement",
"start": 152,
"end": 202,
"attributes": [
{
"type": "JSXAttribute",
"start": 157,
"end": 167,
"name": {
"type": "JSXIdentifier",
"start": 157,
"end": 160,
"name": "src"
},
"value": {
"type": "JSXExpressionContainer",
"start": 161,
"end": 167,
"expression": {
"type": "Identifier",
"start": 162,
"end": 166,
"name": "logo"
}
}
},
{
"type": "JSXAttribute",
"start": 168,
"end": 188,
"name": {
"type": "JSXIdentifier",
"start": 168,
"end": 177,
"name": "className"
},
"value": {
"type": "Literal",
"start": 178,
"end": 188,
"value": "App-logo",
"raw": "\"App-logo\""
}
},
{
"type": "JSXAttribute",
"start": 189,
"end": 199,
"name": {
"type": "JSXIdentifier",
"start": 189,
"end": 192,
"name": "alt"
},
"value": {
"type": "Literal",
"start": 193,
"end": 199,
"value": "logo",
"raw": "\"logo\""
}
}
],
"name": {
"type": "JSXIdentifier",
"start": 153,
"end": 156,
"name": "img"
},
"selfClosing": true
},
"closingElement": null,
"children": []
},
{
"type": "JSXText",
"start": 202,
"end": 211,
"value": "\n ",
"raw": "\n "
},
{
"type": "JSXElement",
"start": 211,
"end": 286,
"openingElement": {
"type": "JSXOpeningElement",
"start": 211,
"end": 214,
"attributes": [],
"name": {
"type": "JSXIdentifier",
"start": 212,
"end": 213,
"name": "p"
},
"selfClosing": false
},
"closingElement": {
"type": "JSXClosingElement",
"start": 282,
"end": 286,
"name": {
"type": "JSXIdentifier",
"start": 284,
"end": 285,
"name": "p"
}
},
"children": [
{
"type": "JSXText",
"start": 214,
"end": 230,
"value": "\n Edit ",
"raw": "\n Edit "
},
{
"type": "JSXElement",
"start": 230,
"end": 253,
"openingElement": {
"type": "JSXOpeningElement",
"start": 230,
"end": 236,
"attributes": [],
"name": {
"type": "JSXIdentifier",
"start": 231,
"end": 235,
"name": "code"
},
"selfClosing": false
},
"closingElement": {
"type": "JSXClosingElement",
"start": 246,
"end": 253,
"name": {
"type": "JSXIdentifier",
"start": 248,
"end": 252,
"name": "code"
}
},
"children": [
{
"type": "JSXText",
"start": 236,
"end": 246,
"value": "src/App.js",
"raw": "src/App.js"
}
]
},
{
"type": "JSXText",
"start": 253,
"end": 282,
"value": " and save to reload.\n ",
"raw": " and save to reload.\n "
}
]
},
{
"type": "JSXText",
"start": 286,
"end": 295,
"value": "\n ",
"raw": "\n "
},
{
"type": "JSXElement",
"start": 295,
"end": 472,
"openingElement": {
"type": "JSXOpeningElement",
"start": 295,
"end": 437,
"attributes": [
{
"type": "JSXAttribute",
"start": 308,
"end": 328,
"name": {
"type": "JSXIdentifier",
"start": 308,
"end": 317,
"name": "className"
},
"value": {
"type": "Literal",
"start": 318,
"end": 328,
"value": "App-link",
"raw": "\"App-link\""
}
},
{
"type": "JSXAttribute",
"start": 339,
"end": 365,
"name": {
"type": "JSXIdentifier",
"start": 339,
"end": 343,
"name": "href"
},
"value": {
"type": "Literal",
"start": 344,
"end": 365,
"value": "https://reactjs.org",
"raw": "\"https://reactjs.org\""
}
},
{
"type": "JSXAttribute",
"start": 376,
"end": 391,
"name": {
"type": "JSXIdentifier",
"start": 376,
"end": 382,
"name": "target"
},
"value": {
"type": "Literal",
"start": 383,
"end": 391,
"value": "_blank",
"raw": "\"_blank\""
}
},
{
"type": "JSXAttribute",
"start": 402,
"end": 427,
"name": {
"type": "JSXIdentifier",
"start": 402,
"end": 405,
"name": "rel"
},
"value": {
"type": "Literal",
"start": 406,
"end": 427,
"value": "noopener noreferrer",
"raw": "\"noopener noreferrer\""
}
}
],
"name": {
"type": "JSXIdentifier",
"start": 296,
"end": 297,
"name": "a"
},
"selfClosing": false
},
"closingElement": {
"type": "JSXClosingElement",
"start": 468,
"end": 472,
"name": {
"type": "JSXIdentifier",
"start": 470,
"end": 471,
"name": "a"
}
},
"children": [
{
"type": "JSXText",
"start": 437,
"end": 468,
"value": "\n Learn React\n ",
"raw": "\n Learn React\n "
}
]
},
{
"type": "JSXText",
"start": 472,
"end": 479,
"value": "\n ",
"raw": "\n "
}
]
},
{
"type": "JSXText",
"start": 488,
"end": 493,
"value": "\n ",
"raw": "\n "
}
]
}
}
]
}
},
{
"type": "ExportDefaultDeclaration",
"start": 508,
"end": 527,
"declaration": {
"type": "Identifier",
"start": 523,
"end": 526,
"name": "App"
}
}
],
"sourceType": "module"
}
