【图文详解】200行JS代码，带你实现代码编译器（人人都能学会）

最近看到掘金、前端公众号好多 ES2020 的文章，想说一句：放开我，我还学得动！

先问大家一句，日常项目开发中你能离开 ES6 吗？

一、前言

对于前端同学来说，编译器可能适合神奇的魔盒🎁，表面普通，但常常给我们惊喜。
编译器，顾名思义，用来编译，编译什么呢？当然是编译代码咯🌹。



其实我们也经常接触到编译器的使用场景：

• React 中 JSX 转换成 JS 代码；
• 通过 Babel 将 ES6 及以上规范的代码转换成 ES5 代码；
• 通过各种 Loader 将 Less / Scss 代码转换成浏览器支持的 CSS 代码；
• 将 TypeScript 转换为 JavaScript 代码。
• and so on…

使用场景非常之多，我的双手都数不过来了。😄
虽然现在社区已经有非常多工具能为我们完成上述工作，但了解一些编译原理是很有必要的。接下来进入本文主题：200行JS代码，带你实现代码编译器。

二、编译器介绍

2.1 程序运行方式

现代程序主要有两种编译模式：静态编译和动态解释。推荐一篇文章《Angular 2 JIT vs AOT》介绍得非常详细。

静态编译

简称 AOT（Ahead-Of-Time）即 提前编译 ，静态编译的程序会在执行前，会使用指定编译器，将全部代码编译成机器码。

（图片来自：https://segmentfault.com/a/1190000008739157）


在 Angular 的 AOT 编译模式开发流程如下：

• 使用 TypeScript 开发 Angular 应用
• 运行 ngc 编译应用程序
  • 使用 Angular Compiler 编译模板，一般输出 TypeScript 代码
  • 运行 tsc 编译 TypeScript 代码
• 使用 Webpack 或 Gulp 等其他工具构建项目，如代码压缩、合并等
• 部署应用

动态解释

简称 JIT（Just-In-Time）即 即时编译 ，动态解释的程序会使用指定解释器，一边编译一边执行程序。
（图片来自：https://segmentfault.com/a/1190000008739157）


在 Angular 的 JIT 编译模式开发流程如下：

• 使用 TypeScript 开发 Angular 应用
• 运行 tsc 编译 TypeScript 代码
• 使用 Webpack 或 Gulp 等其他工具构建项目，如代码压缩、合并等
• 部署应用

AOT vs JIT

AOT 编译流程：（图片来自：https://segmentfault.com/a/1190000008739157）

JIT 编译流程：（图片来自：https://segmentfault.com/a/1190000008739157）

特性	AOT	JIT
编译平台	(Server) 服务器	(Browser) 浏览器
编译时机	Build (构建阶段)	Runtime (运行时)
包大小	较小	较大
执行性能	更好	-
启动时间	更短	-

除此之外 AOT 还有以下优点：

• 在客户端我们不需要导入体积庞大的 angular 编译器，这样可以减少我们 JS 脚本库的大小
• 使用 AOT 编译后的应用，不再包含任何 HTML 片段，取而代之的是编译生成的 TypeScript 代码，这样的话 TypeScript 编译器就能提前发现错误。总而言之，采用 AOT 编译模式，我们的模板是类型安全的。

2.2 现代编译器工作流程

摘抄维基百科中对 编译器工作流程介绍：

一个现代编译器的主要工作流程如下：
源代码（source code）→ 预处理器（preprocessor）→ 编译器（compiler）→ 汇编程序（assembler）→ 目标代码（object code）→ 链接器（linker）→ 可执行文件（executables），最后打包好的文件就可以给电脑去判读运行了。

这里更强调了编译器的作用：将原始程序作为输入，翻译产生目标语言的等价程序。

目前绝大多数现代编译器工作流程基本类似，包括三个核心阶段：

1. 解析（Parsing） ：通过词法分析和语法分析，将原始代码字符串解析成抽象语法树（Abstract Syntax Tree）；
2. 转换（Transformation）：对抽象语法树进行转换处理操作；
3. 生成代码（Code Generation）：将转换之后的 AST 对象生成目标语言代码字符串。

三、编译器实现

本文将通过 The Super Tiny Compiler 源码解读，学习如何实现一个轻量编译器，最终实现将下面原始代码字符串（Lisp 风格的函数调用）编译成 JavaScript 可执行的代码。

	Lisp 风格（编译前）	JavaScript 风格（编译后）
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 号称可能是有史以来最小的编译器，并且其作者 James Kyle 也是 Babel 活跃维护者之一。


让我们开始吧~

3.1 The Super Tiny Compiler 工作流程

现在对照前面编译器的三个核心阶段，了解下 The Super Tiny Compiler  编译器核心工作流程：

图中详细流程如下：

1. 执行入口函数，输入原始代码字符串作为参数；

// 原始代码字符串
(add 2 (subtract 4 2))

2. 进入解析阶段（Parsing），原始代码字符串通过词法分析器（Tokenizer）转换为词法单元数组，然后再通过 词法分析器（Parser）将词法单元数组转换为抽象语法树（Abstract Syntax Tree 简称 AST），并返回；

3. 进入转换阶段（Transformation），将上一步生成的 AST 对象 导入转换器（Transformer），通过转换器中的遍历器（Traverser），将代码转换为我们所需的新的 AST 对象；

4. 进入代码生成阶段（Code Generation），将上一步返回的新 AST 对象通过代码生成器（CodeGenerator），转换成 JavaScript Code；

5. 代码编译结束，返回 JavaScript Code。

上述流程看完后可能一脸懵逼，不过没事，请保持头脑清醒，先有个整个流程的印象，接下来我们开始阅读代码：

3.2 入口方法

首先定义一个入口方法 compiler ，接收原始代码字符串作为参数，返回最终 JavaScript Code：

// 编译器入口方法 参数：原始代码字符串 input
function compiler(input) {
   
  let tokens = tokenizer(input);
  let ast    = parser(tokens);
  let newAst = transformer(ast);
  let output = codeGenerator(newAst);
  return output;
}

3.3 解析阶段

在解析阶段中，我们定义词法分析器方法 tokenizer  和语法分析器方法 parser 然后分别实现：

// 词法分析器 参数：原始代码字符串 input
function tokenizer(input) {
   };

// 语法分析器 参数：词法单元数组tokens
function parser(tokens) {
   };

**

词法分析器

词法分析器方法 tokenizer 的主要任务：遍历整个原始代码字符串，将原始代码字符串转换为词法单元数组（tokens），并返回。
在遍历过程中，匹配每种字符并处理成词法单元压入词法单元数组，如当匹配到左括号（ ( ）时，将往词法单元数组（tokens）压入一个词法单元对象（{type: 'paren', value:'('}）。

// 词法分析器 参数：原始代码字符串 input
function tokenizer(input) {
   
  let current = 0;  // 当前解析的字符索引，作为游标
  let tokens = [];  // 初始化词法单元数组
  // 循环遍历原始代码字符串，读取词法单元数组
  while (current < input.length) {
   
    let char = input[current];
    // 匹配左括号，匹配成功则压入对象 {type: 'paren', value:'('}
    if (char === '('</