-
Notifications
You must be signed in to change notification settings - Fork 149
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
基于 js 实现一个小型编译器 #1233
Comments
基于 js 实现一个小型编译器 by 全栈前端精选
最近在研究一些构建侧的东西,在翻 babel 官网的时候看到了这样一段话:
出于学习的心态,去翻了一下这个仓库源码,以下是笔者的一些学习的记录,希望看完之后能对你理解 babel 的工作原理有一些帮助~ 前言
这就大概是这次 compiler 需要完成的事情,可能看上去语法不是很完整,但是也能够演示现代编译器的主要部分思想了。 大多数的 Compilers 都会把编译过程分成三个主要的过程: parse、transform 以及 code generate:
Parseparse 主要分为两个步骤: 词法分析以及语法分析。
例如前面提到的
语法分析处理出来的 AST 结构为:
Transformtransform 主要就是拿到 parse 得到的抽象语法树,并基于此做出一些修改。tranform 这个过程既可以基于当前语言的风格去修改 ast 也可以使用一种新的语言风格。
或者更复杂一点的子节点类型:
在 transfrom 这个过程中,我们可以通过增/删/改来操作抽象语法树结点,或者可以直接基于当前的抽象语法树创建一个新的出来。 Traversal(遍历)为了能处理所有的结点,我们可以用深度优先搜索对其进行遍历:
遍历流程是这样的:
如果直接在 ast 内部操作而不是产生一个新的 ast,可能就需要介绍所有的种类的抽象。但目前来看,访问所有结点的方法已经足够了。 Visitors(访问)这里我们可以创建一个 visitor 对象,这个对象包括一些方法用于接收不同的结点。
因此当我们遍历 ast 的时候,如果匹配到了对应 type 的结点,可以调用 visitor 中的方法来处理。 Code generateCompiler 的最后一个阶段就是 generate, 这个阶段做的事情可能会和 transformation 重叠,但是代码生成最主要的部分还是根据 AST 来输出代码。 代码实现以上就是 Compiler 所有的部分了,但并不是所有的 Compiler 都是这样,不同的 compiler 目的不同,所以也可能需要不同的步骤。 词法分析器(tokenizer)按照前面的理论分析,我们一步先进行 parser 这个阶段里面的词法分析器(tokenizer)。 因此可以编写这样的一个函数:
语法分析器(parser)词法分析器接收语法分析得到的 token 数组,然后将其转换成 AST 结构。
遍历器(visitors)通过语法分析得到 ast 之后,接下来需要一个遍历器 (visitors) 去遍历结点。然后当遇到某个类型的结点的时候,可以调用 visitors 中对应的类型处理函数:
因此我们的代码可以这样写:
转换器(transformer)转换器配合上面的遍历器来一起使用,它接收之前构建好的 ast,然后将其和 visitor 一起传入遍历器中,从而得到一个全新的 AST 出来。
转换之后生成的 AST 结构为(
接下来我们可以这样编写对应的转换器代码:
代码生成器(code generator)代码生成器同样是个递归函数,最后会将 AST 中的每个结点打印到一个大的字符串中:
编译器(Compiler)到这一步,基本上所有的流程就已经完成了,我们可以创建一个 compiler 函数,通过调用上面的函数就可以完成整个 compiler 的工作了:
代码只需要以下简单几步即可:
我们可以输入前面的几组测试例子,能保证得到的结果是正确的。 总结至此一个 tiny-compiler 就被造出来了,babel 的编译流程也是基于此来完成,因为 babel 本身是个 source to source 的 compiler,整个流程也是分为 parser -> transform -> code generate 这三个步骤完成,具体可以参考 https://babeljs.io/docs/en/#babel-is-a-javascript-compiler 希望本文能帮助读者理解相关编译工具的编译流程。 |
https://mp.weixin.qq.com/s/m-vAV12RA3DXkOd0r_WhEA
The text was updated successfully, but these errors were encountered: