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

[YadongZhang]

目前遇到常用 AST 的场景还是开源库 Storybook ，会用到 jscodeshift ，mdx 和 babel 相关的 AST 工具。

不过日常开发 Figma 切图还是主要工作.

有哪些公司或者部门会经常用到相关领域知识？ 或者说大家都是写业务代码的，不是 Core Team （比如写组件的）就不会用到 AST ？

举个例子，代码重构写 Codemod 才会用到 AST 相关工具。

纯交流，只是觉得这个东西有意思而已

[han3sui]

自定义的 eslint plugin

[wu67]

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

[ZZITE]

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

[musi]

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

[rbe]

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

[MEIerer]

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

[tool2d]

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

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

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

[shakukansp]

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

[AyaseEri]

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

[waiaan]

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

[tool2d]

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

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

[luzihang]

逆向

[janus77]

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

[lneoi]

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

[WildCat]

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

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

[zhuangzhuang1988]

做自动补全时候用到

[HuskyYellow]

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

[duan602728596]

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

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

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

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

[inrich0life]

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

[crs0910]

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