带你实现代码编译器

• 转换成 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）即 「提前编译

 

T 还有以下优点：

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

2.2 现代编译器工作流程

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

  ❝    一个现代编译器的主要工作流程如下：源代码（source code）→ 预处理器（preprocessor）→ 编译器（comp

（编辑：桂林站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!