首页
学习
活动
专区
工具
TVP
发布

AST 介绍

AST是编译器看的。编译器会将源码转化成AST。...AST 的使用场景? TypeScript、babel、webpack、vue-cli 得都是依赖 AST 进行开发的。 通过AST,可以将代码转化后,再输出。比如: 代码压缩。...修改路由配置需要通过AST来转换代码。 需要学习 AST 的哪些知识? 0 了解AST常见节点的结构 了解AST常见节点的结构推荐通读下AST node 规范。 1 源码解析 将源码转化为AST。...2 转换 在遍历AST时,对指定的AST节点做新增,修改或删除操作。 转换可以用@babel/traverse。 创建和验证节点可以用@babel/types。创建AST节点代码示例见这里。...生成目标代码可以用@babel/generator 工具 AST 浏览器 AST 可视化工具 npm 包 recast AST工具库。解析AST(parse),遍历AST,修改AST,生成代码。

1.5K10
您找到你想要的搜索结果了吗?
是的
没有找到

babel操作AST

前一篇文章讲解了什么是AST,但是没有说明如何操作AST,下面来讲解下如何使用babel来操作AST,首先看一下流程图: image.png babel操作AST的流程如上图,首先将js代码转化为AST...,对象的属性有plugins和preset两个属性,这里我们只用plugins,plugins是一个数组,数组的每一项是一个对象,对象的属性为visiter 它是一个插件对象,可以对特定类型的节点进行处理...,这里我们需要处理的节点是ArrowFunctionExpression,它常见的配置方式有两种: 一种是单一处理,结构如下,其中 path 代表当前遍历的路径 path.node 代表当前变量的节点...let visitor = { ArrowFunctionExpression(path){ } } 另一种是用于输入和输出双向处理,结构如下,参数 node 表示当前遍历的节点...let visitor = { //代表处理 ArrowFunctionExpression 节点 ArrowFunctionExpression(path){ let

1.3K52

AST in TypeScript 实践

回到 AST 的话题中,因为 TypeScript 在近几年才算热门,AST 在 TypeScript 的应用上的优秀实践也难得一见,相关的文档及教程也不算太完整,于是开始了 AST in TypeScript...[ AST ]   在 AST Explorer 中,我们甚至查看生成的 JSON 格式的解析结果。   在解析后得到 AST 后,下一步我们就需要开始分析它的结构了。...通过 babel/types 的 API ,我们可以很方便的构造出对应的 AST 语法块,而后加入到 AST 中。...@babel/generator   最后,我们已经完成对 AST 的查找,更改,插入操作了,下一步就是把 AST 转换成 JavaScript 代码了,这时候我们就会用到 babel/generator...总结   上次了解到 AST 还是在分析 Vue.js 是如何编译 Template 的,但没有深入去细究(虽然这次也不算太深入),这次的实践过程大概了解了 Babel 对于代码处理的过程以及所使用到的一些库

5K430

AST是什么?

AST是什么? 在计算机科学中,抽象语法树(Abstract Syntax Tree,AST),或简称语法树(Syntax tree),是源代码语法结构的一种抽象表示。...一般的,在源代码的翻译和编译过程中,语法分析器创建出分析树,然后从分析树生成AST。一旦AST被创建出来,在后续的处理过程中,比如语义分析阶段,会添加一些信息。...---维基百科 最后 在一些开源或者商业的规则引擎中就是存在各种种样的一些AST,比如:Drools,还有的话在现代的react或vue底层就是通过AST来进行建设的,这块有兴趣的同学可以去了解一下...至于个人的理解:最接地气的说明抽象语法树,也可统称流程的规类,然后分解为各种动作或指令,当然这些是自定义,核心还是分析和解决问题,比如像前端的或一些引擎就将AST加入解析器和过滤器,那么解析器里面又有解析

38530

Cobar源码分析之AST

数据库执行SQL时先对SQL进行词法分析、语法分析、语义分析生成抽象语法树(Abstract Syntax Tree,简称AST),再被优化器处理生成执行计划,由执行引擎执行。...AST操作 有了如上对AST的了解,接下来看对AST的操作,最基本的是遍历,利用ASTNode的accept,需要实现SQLASTVisitor接口,这个SQLASTVisitor定义如下: [img4....png] 其实是利用了java的多态,对每种ASTNode都定义了visit方法,遍历时不同对象对应到不同方法上。...AST的应用 分库分表 Cobar中利用AST可以获取table名、列名、比较的值进行分库分表,这也是Cobar最重要的功能。...最后 本文从SQL AST的来源、结构、遍历原理、应用等方面进行介绍,相信看完文章会对SQL AST有了初步的了解,如果想进一步了解可以参考Cobar项目中的单元测试进行实际的演示感受。

55111

AST 与前端工程化实战AST 与前端工程化实战

开始之前,先给大家推荐一个在线查看 AST 结构的平台,非常好用 AST Explorer 相信对 babel 稍有了解的同学都知道,babel 有一系列包对 AST 进行了封装,专门来处理编译这块的事宜...其中预处理器和 BEM 都会有的一个问题就是样式覆盖。...资源模块化:任何资源都能以模块的形式进行加载,目前大部分项目中的文件、CSS、图片等都能直接通过 JS 做统一的依赖关系处理。...很简单,咱直接使用 AST 编写一个 webpack loader,让其自动完成一些代码的注入,若我们项目中存在下面的代码的时候,会自动加上 catch 部分的处理,并将 then 语句第一段处理主动作为...紧接着,我们需要判定我们获取到的 firstExp 是否存在,因为我们的 then 处理中可以是一个空的箭头函数。

1.3K40

Python操作AST解JS混淆

通过生成语法树(AST),可快速修改代码中的一些混淆处理,从而简化代码,便于后续分析。 本文通过Python来把JS转为AST并进行简单的操作,内容很简单。...通过pyjsparser库将script代码转换成为json-ast格式。 pyjsparser是目前用于 python 的相对便捷和易理解的 JavaScript 解析器。...import pyjsparser js_ast = pyjsparser.parse(script) 转换后用Json格式化工具打开。...接下来看这段代码 假如这是一段时间长并且难以阅读的代码,我们需要先将其转为AST,然后遍历所有函数,来查找未被调用的方法,然后进行删除,再根据AST转回正常的JS代码。...': if i['id']['name'] in noCallList: js_ast['body'].remove(i) #js_ast['body'][0]

1.2K30
领券