文章目录AST explorer在线看代码怎么被解析成抽象语法树1、这玩意儿是干嘛的2、为什么要用它3、几个实用功能4、本地跑一份5、想加一个新的 parser6、适合谁用AST explorer在线看代码怎么被解析成抽象语法树astexplorer 在 GitHub 上已经拿到 6.5K Star 了。它就干一件事把代码贴进网页左边是源码右边实时显示解析出来的 AST 树。鼠标在左边移动右边对应的节点高亮点右边某个节点左边对应的代码片段也被圈出来。1、这玩意儿是干嘛的写 Babel 插件、ESLint 规则、jscodeshift 脚本或者任何要操作 AST 的工具时开发者都得反复回答同一个问题这段代码解析出来到底长什么样过去只能 console.log 或者写一个临时脚本跑一遍把节点树打印出来看。astexplorer 把这一步搬到浏览器里打开网址贴代码结果立即出现所有节点都是可点击的树形结构。它支持的 parser 远比想象的多。JavaScript 一项就涵盖 acorn、babylon、espree、esprima、flow-parser、hermes-parser、meriyah、recast、seafox、shift、swc、traceur、typescript、uglify-js 等十几个再加上 CSS、HTML、Vue、Svelte、Markdown、GraphQL、JSON、YAML、PHP、Scala、Solidity、SQL、Lua、Pug、Handlebars、Protocol Buffers、WebIDL、Monkey 等语种基本覆盖前端到后端常见格式。2、为什么要用它写过 ESLint 规则的人都知道光看文档里的 Selector 语法没意义能不能匹配到目标节点必须真跑一遍。用本地的 astexplorer 部署一堆依赖又嫌麻烦在线版打开即用。做 Babel transform 也一样调试 visitor 函数时最怕的就是不知道当前 path 里到底有什么属性。在 astexplorer 里 shiftclick 展开整棵子树每个节点的属性名、值、range 一目了然比翻 babel-types 文档快得多。它还内置了 transformer 模式可以直接在网页里写插件代码并实时看到结果等同把一个最小化的 codemod 环境塞进了浏览器。3、几个实用功能代码片段可以直接保存和 forkURL 里带了状态分享给别人打开就是同一份代码和配置。把 AST 节点复制后丢回窗口工具会用 escodegen 反向生成代码反向验证一遍。源码编辑后或光标移动时右侧自动定位到对应 AST 节点。如果该节点未展开会高亮它的祖先节点。控制台里可以引用$node指向最后一次点击或展开的节点方便在 console 里直接探查属性省掉一个个展开的麻烦。4、本地跑一份项目依赖 Node.js 16作者仍在用这个版本建议用 asdf 之类的版本管理工具切换。把仓库 clone 下来进入website/目录执行yarninstallyarnrun buildyarnstartyarn run watch用于增量构建开发时配合使用。yarn start拉起一个简单的静态服务器浏览器打开就能用。5、想加一个新的 parser仓库结构把每种语言的解析器都放在src/parsers/{language}/下复制一个现有实现改 metadata、loadParser、parse、nodeToRange、getNodeName、opensByDefault这几个方法就差不多。要过滤特定属性定义_ignoredProperties或实现forEachProperty。需要渲染设置面板再加一个renderSettings。加 transformer 流程类似在对应语言目录下的transformers/子目录里复制一个改transform方法里的逻辑和codeExample.txt里的示例代码即可。6、适合谁用写 Babel 插件、ESLint 规则、jscodeshift 脚本的开发者调试时反复打印 AST 节点的人做静态分析或 codemod 工具链的工程师以及学习编译原理、想直观看到代码语法树结构的学生和教师。工具本身不复杂价值在于把一件高频但容易被打断的事做顺了。以及学习编译原理、想直观看到代码语法树结构的学生和教师。工具本身不复杂价值在于把一件高频但容易被打断的事做顺了。