您现在的位置是：亿华云 > 系统运维

用JavaScript实现一个编译器

亿华云2025-10-02 21:10:01【系统运维】1人已围观

简介现在前端开发中，我们常常会用到babel来编译例如react、vue框架的代码，以支持更多的(更古老的)浏览器，babel编译代码的过程就是编译原理的应用之一。Babel is a JavaScrip

现在前端开发中，编译我们常常会用到babel来编译例如react、编译vue框架的编译代码，以支持更多的编译(更古老的)浏览器，babel编译代码的编译过程就是编译原理的应用之一。

Babel is 编译a JavaScript compiler!这是Babel官方对于babel的定义。身为前端工程师，编译因此有必要了解编译原理，编译幸运的编译是，“The 编译Super Tiny Compiler”开源项目利用JavaScript写了一个简单的编译器。

麻雀虽小，编译五脏俱全，编译通过对该项目的编译学习，一起加深对编译过程的编译理解，以提升我们写出更高质量的编译程序!

一、收益

通过掌握(了解)编译原理，将有如下收益：

加深对编程语言的认识，无论何种编程语言，万变不离其宗

殊途同归，站群服务器有利于理解babel等转译器、eslint、prettier、less等工具的工作原理，可开发相关插件

可以造更多轮子了🐶

二、编译过程概述

编译过程的具体实现主要分为三步骤：

代码解析(parse) 代码转换(Transformation) 代码生成(Code Generation)

通过上述三步骤，可以将我们的原代码，转换(编译)到目标代码，例如把javascript代码转换到python一样。

编译过程

“The Super Tiny Compiler”项目中是将LISP语言编译为C语言，如下案例：

* LISP(source) C(target) * * 2 + 2 (add 2 2) add(2, 2) * 4 - 2 (subtract 4 2) subtract(4, 2) * 2 + (4 - 2) (add 2 (subtract 4 2)) add(2, subtract(4, 2))

二、转换过程

基于“The Super Tiny Compiler”项目，实现一个将LISP函数转换到C语言函数编写形式!

（源代码）LISP CODE: (add 2 (subtract 4 2)) （目标代码）C CODE: add(2, subtract(4, 2))

2.1 解析(Parse)

具象到具象的转换是很难的，但抽象到具象的转换往往是容易的。

解析的过程中包含了两个关键步骤词法分析(Lexical Analysis)和语法分析(Syntactic Analysis)，解析就是一个具象到抽象的过程。

2.1.1 词法分析

词法分析的过程，主要是将原代码(字符串)，高防服务器通过分词的方式生成一个具有描述程序语义的token列表。

分词的原理：逐个读取源代码中的字符，与预设的关键词、字符串、数字、操作符等LISP语言定义的语法相关规则，转换成 { type: xx, value: xx} 的具有描述意义的形式

例如LISP：(add 2 (subtract 4 2))，经过词法分析会得到如下结果：

[ { type: paren, value: ( }, { type: name, value: add }, { type: number, value: 2 }, { type: paren, value: ( }, { type: name, value: subtract }, { type: number, value: 4 }, { type: number, value: 2 }, { type: paren, value: ) }, { type: paren, value: ) }, ]

这样一个列表(暂称作：tokens列表)按照顺序下来很好的描述了源代码中的字符串和编程语义。

2.1.2 语法分析

词法分析后得到的tokens列表已经可以描述LISP的语法，但是还并不抽象，因为直观看来，我们无法解读这个程序的意思，这就需要将其转换为AST(Abstract Syntax Tree，抽象语法树)。

为什么要将其转换到AST，AST能更好的描述源代码的语义、描述结构更加通用，服务器租用tokens列表只是描述了“符号”的意义，可以将词法分析过程看作是分类过程，而语法分析的过程，则是将符号组合，使其具有了执行顺序以及执行规则的语法，抽象语法树，因为更抽象，因而能更高效率转换到其他形式。

操作LISP得到的AST能更好转换到C语言的AST，因为他们的AST结构都是类似的，操作AST比tokens更容易。

语法分析的过程，将tokens列表转化成为一个树结构：

{ type: Program, body: [ { type: CallExpression, name: add, params: [ { type: NumberLiteral, value: 2, }, { type: CallExpression, name: subtract, params: [ { type: NumberLiteral, value: 4, }, { type: NumberLiteral, value: 2, } ] } ] } ] }

2.2 代码转换(Transform)

代码转换的过程是将传入的AST结构，通过在AST上例如增、删、改属性，将传入AST转换为C语言需要的标准AST结构。

为了实现转换，我们增加了一个 traverser(ast, visitor) 函数，这个函数接收parse过程得到的AST和visitor规则转换对象。

visitor对象实际可理解为转换规则，traverser函数在遍历AST结构时，会根据visitor中定义的规则执行转换，用于生成新的符合C语言描述标准的AST结构。

最后通过 transform(ast)(预处理，定义visitor对象) -> traverser(ast, visitor) 过程，得到一个新的AST结构：

{ type: Program, body: [ { type: ExpressionStatement, expression: { type: CallExpression, callee: { type: Identifier, name: add }, arguments: [ { type: NumberLiteral, value: 2 }, { type: CallExpression, callee: { type: Identifier, name: subtract }, arguments: [ { type: NumberLiteral, value: 4 }, { type: NumberLiteral, value: 2 } ] } } } ] }

2.3 生成目标代码(Code Generate)

最后通过解析符合C语言标准的AST，根据C语言的语法规则，转换成为C语言格式

codeGenerator(newAst) 函数如下，接收新生成的AST结构：

function codeGenerator(newAst) { switch (newAst.type) { case "Program": return newAst.body.map(codeGenerator).join("\n"); case "ExpressionStatement": return codeGenerator(newAst.expression) + ";"; case "CallExpression": return ( codeGenerator(newAst.callee) + "(" + newAst.arguments.map(codeGenerator).join(", ") + ")" ); case "Identifier": return newAst.name; case "NumberLiteral": return newAst.value; case "StringLiteral": return " + newAst.value + "; default: throw new TypeError(newAst.type); } }

同时还做了代码的部分格式化，比如空格、换行符添加等。

此时自然会思考下，VScode编辑器中的Prettier代码格式化插件是不是也是这么做的?