前端有多少工作是能用到 AST 的

自定义的 eslint plugin

小公司业务仔, 没有涉及过这东东.

例如实现一个 notion 那样非常复杂的 Filter ，可以随意的添加，组合，嵌套各种筛选条件等

一般来讲还是工具类用的比较多
另外业务上我遇到过 B 端表单公式解析

saas 经常会有业务相关的“公式计算器”需求，比如自定义计算某种费率的算法，这种会涉及到 lexer 、parser 等。再比如做 SQL 编辑器的实时输入提示等场景。

写业务用不上，用也是强行使用，写基础设施或其他的才用得上，比如自定义 webpack 插件 eslint 插件啥的

我也喜欢 AST ，但是正常公司的前端需求，大概率不会牵涉到这种代码。

只有不务正业的前端，才会写点这个代码。

anyway, 我还是觉得写 AST 树 /虚拟机，很有意思。

最简单的：封装一个表单生成器

用不用得上取决于公司的风气与领导的态度，我们做低代码本来就有不少公式解析、页面 schema 解析的需求，领导只想低成本解决问题而不是去整什么 AST 之类的东西。

@tool2d 有没有相关的入门学习资料推荐一下？

@waiaan 个人建议，入门可以从解析表达式开始，比如你要动态处理 A = B*1.0 ，又不想把代码写死。

那么就可以编译成 AST 树，然后运行时，塞到堆栈虚拟机里运行，获取结果。

逆向

见过某些电商类公司，做活动和生成各种券的时候会需要根据产品设计的策略生成，而公司内部有自己的一个 web 后台，输入各种条件就能生成相应的券。这个地方应该是用了的

一般写插件扩展功能的时候会用到，日常场景用不上

https://github.com/dsherret/ts-morph 我用这个。

之前写 https://github.com/microsoft/ts-gyb （一个从 TypeScript 生成 Kotlin/Swift interfaces) 的时候没发现这个库，写得略累。

做自动补全时候用到

有的，公司自己搞 vue3 转换成原生代码，近似于 React Native 那种编译。

曾经做过的：
为了在代码不变的情况下，在 electron 的环境中实现 require 的按需加载，开发了 babel plugin 。

为了优化编译的 antd 的暗黑模式的 css 代码，通过 typescript 解析代码生成 AST ，根据查找到的 antd 组件按需加载 less 文件，然后开发 postcss plugin 来删除多余的 css rule ，只保留颜色相关的 rule 。

实现自定义规则而开发 eslint plugin 。

新闻行业，发文章后会有敏感词检测并高亮，将 html 解析成 AST ，找到并标记敏感词。

涉及到源码处理的时候，就会用

爬别人网页里面的 js 内容时用到过，简单的找某个变量的值，正则不好拿又不想 eval 的时候。

普通业务用不到，涉及架构优化、源码管理、构建性能提升的时候会用到

我用 ast 的方式解析后端 php 的代码，获取到数据接口的字段名和标题，然后用这个来生成前端代码

公司的微前端框架，以及权限部分有用到

我做 i18n 的 key 自动收集

@duan602728596 大佬，有就 [新闻行业，发文章后会有敏感词检测并高亮，将 html 解析成 AST ，找到并标记敏感词。] 写过相关文章吗。想了解学习下

我是目前只在开发自定义 eslint 规则时有用到, 主要是适配项目自有校验和通用的代码修复

@lopda 因为这个是公司业务强相关的，所以没有相关文章。
因为文章是 html 的格式的，在文章发布前会通过 api 检查是否有敏感词并返回敏感词数组，然后本地使用 parse5 将 html 解析成 AST ，在 AST 中查找敏感词。AST 的遍历参考了 babel 的实现方法，通过不同的插件实现实现不同的功能。
以政治类新闻中的领导人名称为例，假设领导人名为 CKQ 。可能会出现<div><span>C</span><b>K</b></div><span>Q</span>这种情况，光靠正则不太够用，而且不太好做标记。就会用 AST 来查找并标记。

一直都用 AST ， 都自己写的，大学上过编译原理的，这个东西不难。AST 做完以后， 直接把 AST 转成 c++代码或其他平台代码，就可以自动跨语言移植了

我能想到的就是逆向 js 可能有用

普通业务中很少有用到的场景吧，一般都在基建相关的代码里才会用到。我用到的场景一般是 eslint plugin 、将某种形式的文件转为另一种、解析 js 代码提取信息、代码片段自动重构。比如这个寻找改动文件和函数影响面的小项目： https://github.com/CocaColf/coderfly

代码编辑器上的高亮 /lint ，web 终端上的 sh 脚本、sql 自动补全

当业务需要理解语言含义的时候就要用到 AST

数据库，sql 解析的时候会用

一般场景就是做些工具类的吧，构建工具的插件或者 babel 、eslint 这些的插件，或者就是些 codemod 工具，业务上基本上基本就没用到了

1. 分析 ast ，自动提取出 i18n 的 key 和 message

2. 稍后读软件，为了开发一个完美的模板引擎，自己解析 ast 和写解释器。

3. 写 ast 转换器，把 js 翻译成 rust.

4. 解析器，根据代码注释自动生成 API 文档

菜鸡的我居然不知道 AST 是啥…

碰到正则没办法很好解析的 *结构化* 语言文本，解析起来就需要走 AST 。

有复杂 DSL 需求可以看看 ANTLR4 ，比如上面有坛友说的低代码平台的例子，可能会需要实现奇形怪状的 SQL 方言，或者某些业内特定的脚本语言等等。相比人肉手撸 lexer/parser ，用 antlr 写一组 g4 语法树文件可以自动生成 lexer/parser ，更快更简单也不容易出 bug ，还支持好多语言 java/py/cpp/js ，另外还有 debugger 可以用来调试。

虽然我是后端的，不过 g4 文件写完了也会给前端，用同一个语法树给前端生成 js 的 lexer 和 parser ，前端再去做语法检查、补全提示之类的功能。

上面很多人说的这个 AST 和我理解的好像不太一样。

按这个标准，我自己写的 JSON to TS interface 也是 AST 了？

我可不这么认为。

看了一圈，原来都是大佬，就我一个菜鸡

@ccyu220 #38
是的，我也这么觉得，虽然我不是前端。
我感觉他们在说 分析树 而不是 抽象语法树

我写的低代码库输出就是 AST ，因为我觉得输出 html 还是输出 js 还是输出 json 都太憨了，所以自己写了一套

https://github.com/moonrailgun/saucer

最近为自己的开源库写了一个 vscode 插件，里面有 ast 解析代码做语法高亮、查错等的支持。有兴趣的小伙伴可以了解下： https://github.com/easysql/vscode-ext