700字范文 > 实现一个代码编译器（200行JS代码）

实现一个代码编译器（200行JS代码）

时间：2020-03-09 04:03:05

相关推荐

实现一个代码编译器（200行JS代码）

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

先问大家一句，日常项目开发中你能离开 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）即「提前编译」，静态编译的程序会在执行前，会使用指定编译器，将全部代码编译成机器码。

（图片来自：/a/1190000008739157）

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

使用 TypeScript 开发 Angular 应用

运行 ngc 编译应用程序

使用 Angular Compiler 编译模板，一般输出 TypeScript 代码

运行 tsc 编译 TypeScript 代码

使用 Webpack 或 Gulp 等其他工具构建项目，如代码压缩、合并等

部署应用

动态解释

简称「JIT」（Just-In-Time）即「即时编译」，动态解释的程序会使用指定解释器，一边编译一边执行程序。

（图片来自：/a/1190000008739157[1]）

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

使用 TypeScript 开发 Angular 应用

运行 tsc 编译 TypeScript 代码

使用 Webpack 或 Gulp 等其他工具构建项目，如代码压缩、合并等

部署应用

AOT vs JIT

AOT 编译流程：（图片来自：/a/1190000008739157）

JIT 编译流程：（图片来自：/a/1190000008739157）

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

在客户端我们不需要导入体积庞大的 angular 编译器，这样可以减少我们 JS 脚本库的大小。

使用 AOT 编译后的应用，不再包含任何 HTML 片段，取而代之的是编译生成的 TypeScript 代码，这样的话 TypeScript 编译器就能提前发现错误。总而言之，采用 AOT 编译模式，我们的模板是类型安全的。

2.2 现代编译器工作流程

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

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

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

编译器三个核心阶段.png

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

「解析（Parsing）」：通过词法分析和语法分析，将原始代码字符串解析成「抽象语法树（Abstract Syntax Tree）」；

「转换（Transformation）」：对抽象语法树进行转换处理操作；

「生成代码（Code Generation）」：将转换之后的 AST 对象生成目标语言代码字符串。

三、编译器实现

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

话说 The Super Tiny Compiler 号称「可能是有史以来最小的编译器」，并且其作者 James Kyle 也是 Babel 活跃维护者之一。

让我们开始吧~

3.1 The Super Tiny Compiler 工作流程

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

图中详细流程如下：

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

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

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

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

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

「代码编译结束」，返回「JavaScript Code」。

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

3.2 入口方法

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

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

3.3 解析阶段

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

// 词法分析器参数：原始代码字符串 inputfunction tokenizer(input) {};// 语法分析器参数：词法单元数组tokensfunction parser(tokens) {};

词法分析器

「词法分析器方法」tokenizer的主要任务：遍历整个原始代码字符串，将原始代码字符串转换为「词法单元数组（tokens）」，并返回。

在遍历过程中，匹配每种字符并处理成「词法单元」压入「词法单元数组」，如当匹配到左括号（(）时，将往「词法单元数组（tokens）「压入一个」词法单元对象」（{type: 'paren', value:'('}）。

// 词法分析器参数：原始代码字符串 inputfunction tokenizer(input) {let current = 0; // 当前解析的字符索引，作为游标let tokens = []; // 初始化词法单元数组// 循环遍历原始代码字符串，读取词法单元数组while (current < input.length) {let char = input[current];// 匹配左括号，匹配成功则压入对象 {type: 'paren', value:'('}if (char === '(') {tokens.push({type: 'paren',value: '('});current++;continue; // 自增current，完成本次循环，进入下一个循环}// 匹配右括号，匹配成功则压入对象 {type: 'paren', value:')'}if (char === ')') {tokens.push({type: 'paren',value: ')'});current++;continue;}// 匹配空白字符，匹配成功则跳过// 使用 \s 匹配，包括空格、制表符、换页符、换行符、垂直制表符等let WHITESPACE = /\s/;if (WHITESPACE.test(char)) {current++;continue;}// 匹配数字字符，使用 [0-9]：匹配// 匹配成功则压入{type: 'number', value: value}// 如 (add 123 456) 中 123 和 456 为两个数值词法单元let NUMBERS = /[0-9]/;if (NUMBERS.test(char)) {let value = '';// 匹配连续数字，作为数值while (NUMBERS.test(char)) {value += char;char = input[++current];}tokens.push({ type: 'number', value });continue;}// 匹配形双引号包围的字符串// 匹配成功则压入 { type: 'string', value: value }// 如 (concat "foo" "bar") 中 "foo" 和 "bar" 为两个字符串词法单元if (char === '"') {let value = '';char = input[++current]; // 跳过左双引号// 获取两个双引号之间所有字符while (char !== '"') {value += char;char = input[++current];}char = input[++current];// 跳过右双引号tokens.push({ type: 'string', value });continue;}// 匹配函数名，要求只含大小写字母，使用 [a-z] 匹配 i 模式// 匹配成功则压入 { type: 'name', value: value }// 如 (add 2 4) 中 add 为一个名称词法单元let LETTERS = /[a-z]/i;if (LETTERS.test(char)) {let value = '';// 获取连续字符while (LETTERS.test(char)) {value += char;char = input[++current];}tokens.push({ type: 'name', value });continue;}// 当遇到无法识别的字符，抛出错误提示，并退出throw new TypeError('I dont know what this character is: ' + char);}// 词法分析器的最后返回词法单元数组return tokens;}

语法分析器

「语法分析器方法」parser的主要任务：将「词法分析器」返回的「词法单元数组」，转换为能够描述语法成分及其关系的中间形式（「抽象语法树 AST」）。

// 语法分析器参数：词法单元数组tokensfunction parser(tokens) {let current = 0; // 设置当前解析的词法单元的索引，作为游标// 递归遍历（因为函数调用允许嵌套），将词法单元转成 LISP 的 AST 节点function walk() {// 获取当前索引下的词法单元 tokenlet token = tokens[current];// 数值类型词法单元if (token.type === 'number') {current++; // 自增当前 current 值// 生成一个 AST节点 'NumberLiteral'，表示数值字面量return {type: 'NumberLiteral',value: token.value,};}// 字符串类型词法单元if (token.type === 'string') {current++;// 生成一个 AST节点 'StringLiteral'，表示字符串字面量return {type: 'StringLiteral',value: token.value,};}// 函数类型词法单元if (token.type === 'paren' && token.value === '(') {// 跳过左括号，获取下一个词法单元作为函数名token = tokens[++current];let node = {type: 'CallExpression',name: token.value,params: []};// 再次自增 current 变量，获取参数词法单元token = tokens[++current];// 遍历每个词法单元，获取函数参数，直到出现右括号"）"while ((token.type !== 'paren') || (token.type === 'paren' && token.value !== ')')) {node.params.push(walk());token = tokens[current];}current++; // 跳过右括号return node;}// 无法识别的字符，抛出错误提示throw new TypeError(token.type);}// 初始化 AST 根节点let ast = {type: 'Program',body: [],};// 循环填充 ast.bodywhile (current < tokens.length) {ast.body.push(walk());}// 最后返回astreturn ast;}

3.4 转换阶段

在转换阶段中，定义了转换器transformer函数，使用词法分析器返回的 LISP 的 AST 对象作为参数，将 AST 对象转换成一个新的 AST 对象。

为了方便代码组织，我们定义一个遍历器traverser方法，用来处理每一个节点的操作。

// 遍历器参数：ast 和 visitorfunction traverser(ast, visitor) {// 定义方法 traverseArray// 用于遍历 AST节点数组，对数组中每个元素调用 traverseNode 方法。function traverseArray(array, parent) {array.forEach(child => {traverseNode(child, parent);});}// 定义方法 traverseNode// 用于处理每个 AST 节点，接受一个 node 和它的父节点 parent 作为参数function traverseNode(node, parent) {// 获取 visitor 上对应方法的对象let methods = visitor[node.type];// 获取 visitor 的 enter 方法，处理操作当前 nodeif (methods && methods.enter) {methods.enter(node, parent);}switch (node.type) {// 根节点case 'Program':traverseArray(node.body, node);break;// 函数调用case 'CallExpression':traverseArray(node.params, node);break;// 数值和字符串，忽略case 'NumberLiteral':case 'StringLiteral':break;// 当遇到无法识别的字符，抛出错误提示，并退出default:throw new TypeError(node.type);}if (methods && methods.exit) {methods.exit(node, parent);}}// 首次执行，开始遍历traverseNode(ast, null);}

在看「遍历器」traverser方法时，建议结合下面介绍的「转换器」transformer方法阅读：

// 转化器，参数：astfunction transformer(ast) {// 创建 newAST，与之前 AST 类似，Program：作为新 AST 的根节点let newAst = {type: 'Program',body: [],};// 通过 _context 维护新旧 AST，注意 _context 是一个引用，从旧的 AST 到新的 AST。ast._context = newAst.body;// 通过遍历器遍历处理旧的 ASTtraverser(ast, {// 数值，直接原样插入新AST，类型名称 NumberLiteralNumberLiteral: {enter(node, parent) {parent._context.push({type: 'NumberLiteral',value: node.value,});},},// 字符串，直接原样插入新AST，类型名称 StringLiteralStringLiteral: {enter(node, parent) {parent._context.push({type: 'StringLiteral',value: node.value,});},},// 函数调用CallExpression: {enter(node, parent) {// 创建不同的AST节点let expression = {type: 'CallExpression',callee: {type: 'Identifier',name: node.name,},arguments: [],};// 函数调用有子类，建立节点对应关系，供子节点使用node._context = expression.arguments;// 顶层函数调用算是语句，包装成特殊的AST节点if (parent.type !== 'CallExpression') {expression = {type: 'ExpressionStatement',expression: expression,};}parent._context.push(expression);},}});return newAst;}

重要一点，这里通过_context引用来「维护新旧 AST 对象」，管理方便，避免污染旧 AST 对象。

3.5 代码生成

接下来到了最后一步，我们定义「代码生成器」codeGenerator方法，通过递归，将新的 AST 对象代码转换成 JavaScript 可执行代码字符串。

// 代码生成器参数：新 AST 对象function codeGenerator(node) {switch (node.type) {// 遍历 body 属性中的节点，且递归调用 codeGenerator，按行输出结果case 'Program':return node.body.map(codeGenerator).join('\n');// 表达式，处理表达式内容，并用分号结尾case 'ExpressionStatement':return (codeGenerator(node.expression) +';');// 函数调用，添加左右括号，参数用逗号隔开case 'CallExpression':return (codeGenerator(node.callee) +'(' +node.arguments.map(codeGenerator).join(', ') +')');// 标识符，返回其 namecase 'Identifier':return node.name;// 数值，返回其 valuecase 'NumberLiteral':return node.value;// 字符串，用双引号包裹再输出case 'StringLiteral':return '"' + node.value + '"';// 当遇到无法识别的字符，抛出错误提示，并退出default:throw new TypeError(node.type);}}

3.6 编译器测试

截止上一步，我们完成简易编译器的代码开发。接下来通过前面原始需求的代码，测试编译器效果如何：

const add = (a, b) => a + b;const subtract = (a, b) => a - b;const source = "(add 2 (subtract 4 2))";const target = compiler(source); // "add(2, (subtract(4, 2));"const result = eval(target); // Ok result is 4

3.7 工作流程小结

总结 The Super Tiny Compiler 编译器整个工作流程：

「1、input => tokenizer => tokens」

「2、tokens => parser => ast」

「3、ast => transformer => newAst」

「4、newAst => generator => output」

其实多数编译器的工作流程都大致相同：

四、手写 Webpack 编译器

根据之前介绍的 The Super Tiny Compiler编译器核心工作流程，再来手写 Webpack 的编译器，会让你有种众享丝滑的感觉~

话说，有些面试官喜欢问这个呢。当然，手写一遍能让我们更了解 Webpack 的构建流程，这个章节我们简要介绍一下。

4.1 Webpack 构建流程分析

从启动构建到输出结果一系列过程：

「初始化参数」

解析 Webpack 配置参数，合并 Shell 传入和webpack.config.js文件配置的参数，形成最后的配置结果。

「开始编译」

上一步得到的参数初始化compiler对象，注册所有配置的插件，插件监听 Webpack 构建生命周期的事件节点，做出相应的反应，执行对象的run方法开始执行编译。

「确定入口」

从配置的entry入口，开始解析文件构建 AST 语法树，找出依赖，递归下去。

「编译模块」

递归中根据「文件类型」和「loader 配置」，调用所有配置的 loader 对文件进行转换，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。

「完成模块编译并输出」

递归完事后，得到每个文件结果，包含每个模块以及他们之间的依赖关系，根据entry配置生成代码块chunk。

「输出完成」

输出所有的chunk到文件系统。

注意：在构建生命周期中有一系列插件在做合适的时机做合适事情，比如UglifyPlugin会在 loader 转换递归完对结果使用UglifyJs压缩「覆盖之前的结果」。

4.2 代码实现

手写 Webpack 需要实现以下三个核心方法：

createAssets: 收集和处理文件的代码；

createGraph：根据入口文件，返回所有文件依赖图；

bundle: 根据依赖图整个代码并输出；

1. createAssets

2. createGraph

3. bunlde

五、总结

本文从编译器概念和基本工作流程开始介绍，然后通过 The Super Tiny Compiler 译器源码，详细介绍核心工作流程实现，包括「词法分析器」、「语法分析器」、「遍历器」和「转换器」的基本实现，最后通过「代码生成器」，将各个阶段代码结合起来，实现了这个号称「可能是有史以来最小的编译器。」

本文也简要介绍了「手写 Webpack 的实现」，需要读者自行完善和深入哟！

「是不是觉得很神奇~」

当然通过本文学习，也仅仅是编译器相关知识的边山一脚，要学的知识还有非常多，不过好的开头，更能促进我们学习动力。加油！

最后，文中介绍到的代码，我存放在 Github 上：

[learning]the-super-tiny-compiler.js[4]

[writing]webpack-compiler.js[5]

六、参考资料

《The Super Tiny Compiler》[6]

《有史以来最小的编译器源码解析》[7]

《Angular 2 JIT vs AOT》[8]

Reference

[1]

/a/1190000008739157: /a/1190000008739157

[2]

编译器: /wiki/%E7%B7%A8%E8%AD%AF%E5%99%A8?wprov=srpw1_0

[3]

The Super Tiny Compiler: https://the-super-tiny-compiler.glitch.me/

[4]

[learning]the-super-tiny-compiler.js: /pingan8787/Leo-JavaScript/blob/master/Cute-Frontend/learningSourceCode/%5Blearning%5Dthe-super-tiny-compiler.js

[5]

[writing]webpack-compiler.js: /pingan8787/Leo-JavaScript/blob/master/Cute-Frontend/learningSourceCode/%5Bwriting%5Dwebpack-compiler.js

[6]

《The Super Tiny Compiler》: https://the-super-tiny-compiler.glitch.me/

[7]

《有史以来最小的编译器源码解析》: /a/1190000016402699

[8]

《Angular 2 JIT vs AOT》: /a/1190000008739157

平庸前端码农之蜕变 — AST

手摸手教你写几个实用的AST插件

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论