这是手写babel系列的第二讲。这一讲我们来说说抽象语法树(AST)。今天是2024年 大年初四,在这里先祝大家新年快乐,龙年行大运。
AST是干啥的?
它是我们源代码的一种抽象表示
。更具体的来说就是使用树状结构去表示代码的语法结构
。
AST是如何生成的?
它的形成可以分为3个步骤,分别是 词法分析
、语法分析
、语义分析
。
这里有一个问题,大家需要了解这方面的知识吗?我们拿到AST去做一些事情,可以利用AST可视化网站,这很方便的,比如下面这样:
我觉着是一定要了解的。功利性的来讲,如果你在面试过程中遇到了相关的问题,而如果你把AST可视化网站搬过去应付面试官的话,那大概率这个知识点你是不通过,即使利用AST网站去做源代码转换的事情 这是一个事实。
词法分析
这个过程主要就是读取代码,将代码都拆解成一个一个的最小单元(有人管它叫tokens,也有人管它叫做单词,叫啥不重要,能够知道它是AST的最小组成单元即可)。
语法分析
在词法分析的基础上,根据语言的语法规则,分析程序基本语法结构,并将最小单元组成树状结构。
语义分析
这一步主要是用来检查源代码是否存在语法错误,如果有错误的话就直接抛出来。
如何写一个最简单的babel插件
上面这个作为了解就可以了,不必过多深入。接下来我们来看看如何写一个babel插件。
还是一样,先打开AST可视化网站,然后选中transform选项,如下图:
我们看到,左下方,默认就有一个babel插件
。左上方是一段js源代码
,右上方是源代码对应的AST
。左上方的js源代码 经过 左下方的babel插件处理后,生成了右下方的目标代码。
那我们接下来就一起探讨一下 这个babel插件是如何编写的。
节点(node)
右上方是实时的AST,它里面的每个对象,都可以被叫做一个节点。
这些节点都有以下类似的结构:
{
type: "XXXXX",
name: ...,
id: {...},
params: [...],
left: {...},
right: {...},
body: {...}
}
上面的这些属性里,type字段是必须要有的
,用来标识当前节点的类型。它是一个枚举,包含 XxDeclaration、XxStatement、XxExpression等等。
插件里的babel参数
export default function (babel) {
const { types: t } = babel;
return {
name: "ast-transform", // not required
visitor: {
Identifier(path) {
path.node.name = path.node.name.split('').reverse().join('');
}
}
};
}
首先,我们看到,一个babel插件其实就是一个函数
,然后,这个函数需要返回一个对象obj
,obj需要拥有一个访问者vistor属性
。这个vistor属性的值也是一个对象b。对象b由不同的函数属性构成
。
babel参数其实指代的是 @babel/core 这个核心模块,里面包含了一些工具方法。比如babel.types对象,这个对象里包含了很多的方法,支持你去创建不同类型的节点。比如:babel.types.stringLiteral方法用于创建一个字符串值
。
本篇文章里暂时还用不到,后续文章会有讲到。
vistor访问者
它主要是用来处理节点的增删改查的。所以它是很重要的一个概念。我们知道,节点的类型有很多种,你想要处理哪个,就要把这一类的节点类型写在一个函数里去处理。
以我们这里为例子:
let tips = [];
我们要写一个插件,用来将上述代码的 let 改为 const
,那我们要怎么写呢?
首先,将我们的代码放到 AST可视化网站上,随后,我们应该有如下思路:
- let这个关键字,对于AST来说,它也是一个节点。
- 既然let都是一个节点了,那const也应该是一个节点。
- 这个需求其实也就是替换节点。
- 替换节点的代码位置应该在哪里呢?刚才我们讲过,vistor就是干这个事的。
- 如何写呢?我们刚才也说过,你要把同一个类型的节点处理写在一个函数里。
- 那我怎么知道let属于哪个类型的节点?AST可视化网站不就派上用场了嘛。你把上面的代码放到这个可视化网站里看一下不就知道啦。
- 经过查看得知,let 的节点类型 是VariableDeclaration。
于是,我们就可以写出下面的babel插件:
export default function (babel) {
const { types: t } = babel;
return {
name: "ast-transform", // not required
visitor: {
VariableDeclaration(path){
path.node.kind = 'const';
}
}
};
}
最后发现,我们如约的完成了这个需求。
最后
好啦,本期babel分享到这里就结束啦,希望我的分享能够对你有帮助,我们下期再见啦~~
对啦,如果想看更多内容,欢迎关注公众号:《从0前端》。