V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
YadongZhang
V2EX  ›  程序员

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

  •  
  •   YadongZhang ·
    zhyd1997 · 152 天前 · 5588 次点击
    这是一个创建于 152 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

    第 1 条附言  ·  152 天前
    看了评论都挺强,除了我也写过几行 eslint 的插件,其他评论我都看不懂
    42 条回复    2022-12-30 13:56:20 +08:00
    han3sui
        1
    han3sui  
       152 天前
    自定义的 eslint plugin
    wu67
        2
    wu67  
       152 天前
    小公司业务仔, 没有涉及过这东东.
    ZZITE
        3
    ZZITE  
       152 天前
    例如实现一个 notion 那样非常复杂的 Filter ,可以随意的添加,组合,嵌套各种筛选条件等
    musi
        4
    musi  
       152 天前
    一般来讲还是工具类用的比较多
    另外业务上我遇到过 B 端表单公式解析
    rbe
        5
    rbe  
       152 天前
    saas 经常会有业务相关的“公式计算器”需求,比如自定义计算某种费率的算法,这种会涉及到 lexer 、parser 等。再比如做 SQL 编辑器的实时输入提示等场景。
    MEIerer
        6
    MEIerer  
       152 天前
    写业务用不上,用也是强行使用,写基础设施或其他的才用得上,比如自定义 webpack 插件 eslint 插件啥的
    tool2d
        7
    tool2d  
       152 天前
    我也喜欢 AST ,但是正常公司的前端需求,大概率不会牵涉到这种代码。

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

    anyway, 我还是觉得写 AST 树 /虚拟机,很有意思。
    shakukansp
        8
    shakukansp  
       152 天前
    最简单的:封装一个表单生成器
    AyaseEri
        9
    AyaseEri  
       152 天前
    用不用得上取决于公司的风气与领导的态度,我们做低代码本来就有不少公式解析、页面 schema 解析的需求,领导只想低成本解决问题而不是去整什么 AST 之类的东西。
    waiaan
        10
    waiaan  
       152 天前 via Android
    @tool2d 有没有相关的入门学习资料推荐一下?
    tool2d
        11
    tool2d  
       152 天前
    @waiaan 个人建议,入门可以从解析表达式开始,比如你要动态处理 A = B*1.0 ,又不想把代码写死。

    那么就可以编译成 AST 树,然后运行时,塞到堆栈虚拟机里运行,获取结果。
    luzihang
        12
    luzihang  
       152 天前
    逆向
    janus77
        13
    janus77  
       152 天前
    见过某些电商类公司,做活动和生成各种券的时候会需要根据产品设计的策略生成,而公司内部有自己的一个 web 后台,输入各种条件就能生成相应的券。这个地方应该是用了的
    lneoi
        14
    lneoi  
       152 天前
    一般写插件扩展功能的时候会用到,日常场景用不上
    WildCat
        15
    WildCat  
       152 天前
    https://github.com/dsherret/ts-morph 我用这个。

    之前写 https://github.com/microsoft/ts-gyb (一个从 TypeScript 生成 Kotlin/Swift interfaces) 的时候没发现这个库,写得略累。
    zhuangzhuang1988
        16
    zhuangzhuang1988  
       152 天前
    做自动补全时候用到
    HuskyYellow
        17
    HuskyYellow  
       152 天前
    有的,公司自己搞 vue3 转换成原生代码,近似于 React Native 那种编译。
    duan602728596
        18
    duan602728596  
       152 天前   ❤️ 2
    曾经做过的:
    为了在代码不变的情况下,在 electron 的环境中实现 require 的按需加载,开发了 babel plugin 。

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

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

    新闻行业,发文章后会有敏感词检测并高亮,将 html 解析成 AST ,找到并标记敏感词。
    inrich0life
        19
    inrich0life  
       152 天前
    涉及到源码处理的时候,就会用
    crs0910
        20
    crs0910  
       152 天前
    爬别人网页里面的 js 内容时用到过,简单的找某个变量的值,正则不好拿又不想 eval 的时候。
    Geo200
        21
    Geo200  
       152 天前
    普通业务用不到,涉及架构优化、源码管理、构建性能提升的时候会用到
    Echoldman
        22
    Echoldman  
       152 天前
    我用 ast 的方式解析后端 php 的代码,获取到数据接口的字段名和标题,然后用这个来生成前端代码
    yl20181003
        23
    yl20181003  
       152 天前 via Android
    公司的微前端框架,以及权限部分有用到
    rick2c
        24
    rick2c  
       152 天前   ❤️ 1
    我做 i18n 的 key 自动收集
    lopda
        25
    lopda  
       152 天前
    @duan602728596 大佬,有就 [新闻行业,发文章后会有敏感词检测并高亮,将 html 解析成 AST ,找到并标记敏感词。] 写过相关文章吗。想了解学习下
    retrocode
        26
    retrocode  
       152 天前
    我是目前只在开发自定义 eslint 规则时有用到, 主要是适配项目自有校验和通用的代码修复
    duan602728596
        27
    duan602728596  
       152 天前
    @lopda 因为这个是公司业务强相关的,所以没有相关文章。
    因为文章是 html 的格式的,在文章发布前会通过 api 检查是否有敏感词并返回敏感词数组,然后本地使用 parse5 将 html 解析成 AST ,在 AST 中查找敏感词。AST 的遍历参考了 babel 的实现方法,通过不同的插件实现实现不同的功能。
    以政治类新闻中的领导人名称为例,假设领导人名为 CKQ 。可能会出现<div><span>C</span><b>K</b></div><span>Q</span>这种情况,光靠正则不太够用,而且不太好做标记。就会用 AST 来查找并标记。
    jones2000
        28
    jones2000  
       152 天前
    一直都用 AST , 都自己写的,大学上过编译原理的,这个东西不难。AST 做完以后, 直接把 AST 转成 c++代码或其他平台代码,就可以自动跨语言移植了
    liuidetmks
        29
    liuidetmks  
       152 天前
    我能想到的就是逆向 js 可能有用
    CocaColf
        30
    CocaColf  
       152 天前   ❤️ 1
    普通业务中很少有用到的场景吧,一般都在基建相关的代码里才会用到。我用到的场景一般是 eslint plugin 、将某种形式的文件转为另一种、解析 js 代码提取信息、代码片段自动重构。比如这个寻找改动文件和函数影响面的小项目: https://github.com/CocaColf/coderfly
    qieqie
        31
    qieqie  
       152 天前 via iPhone
    代码编辑器上的高亮 /lint ,web 终端上的 sh 脚本、sql 自动补全
    AmiKara
        32
    AmiKara  
       152 天前
    当业务需要理解语言含义的时候就要用到 AST
    loloxwg
        33
    loloxwg  
       152 天前
    数据库,sql 解析的时候会用
    liaozzzzzz
        34
    liaozzzzzz  
       152 天前
    一般场景就是做些工具类的吧,构建工具的插件或者 babel 、eslint 这些的插件,或者就是些 codemod 工具,业务上基本上基本就没用到了
    hamsterbase
        35
    hamsterbase  
       152 天前
    1. 分析 ast ,自动提取出 i18n 的 key 和 message

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

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

    4. 解析器,根据代码注释自动生成 API 文档
    nong99
        36
    nong99  
       152 天前 via Android
    菜鸡的我居然不知道 AST 是啥…
    cabbage
        37
    cabbage  
       152 天前
    碰到正则没办法很好解析的 *结构化* 语言文本,解析起来就需要走 AST 。

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

    虽然我是后端的,不过 g4 文件写完了也会给前端,用同一个语法树给前端生成 js 的 lexer 和 parser ,前端再去做语法检查、补全提示之类的功能。
    ccyu220
        38
    ccyu220  
       151 天前
    上面很多人说的这个 AST 和我理解的好像不太一样。

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

    我可不这么认为。
    qingshui33
        39
    qingshui33  
       151 天前
    看了一圈,原来都是大佬,就我一个菜鸡
    LindsayZhou
        40
    LindsayZhou  
       151 天前
    @ccyu220 #38
    是的,我也这么觉得,虽然我不是前端。
    我感觉他们在说 分析树 而不是 抽象语法树
    moonrailgun
        41
    moonrailgun  
       151 天前
    我写的低代码库输出就是 AST ,因为我觉得输出 html 还是输出 js 还是输出 json 都太憨了,所以自己写了一套

    https://github.com/moonrailgun/saucer
    BrightLiao
        42
    BrightLiao  
       150 天前
    最近为自己的开源库写了一个 vscode 插件,里面有 ast 解析代码做语法高亮、查错等的支持。有兴趣的小伙伴可以了解下: https://github.com/easysql/vscode-ext
    关于   ·   帮助文档   ·   博客   ·   nftychat   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   915 人在线   最高记录 5634   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 45ms · UTC 22:31 · PVG 06:31 · LAX 15:31 · JFK 18:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.