作为一个前端工程师，最近涉及到工程化领域，想了解一些编译的知识。

编译到底是什么？

编译啊就是一种转换技术，从一门编程语言到另一门编程语言，从高级语言转换成低级语言，或者从高级语言到高级语言，这样的转换技术。

什么是高级语言，什么是低级语言啊？

低级语言是与机器有关的，涉及到寄存器、cpu指令等，特别“低”，描述具体在机器上的执行过程，比如机器语言、汇编语言、字节码等。高级语言则没有这些具体执行的东西，主要用来表达逻辑，而且提供了条件、循环、函数、面向对象等特性来组织逻辑，然后通过编译来把这些描述好的高级语言逻辑自动转换为低级语言的指令，这样既能够方便的表达逻辑，又不影响具体执行。说不影响执行也不太对，因为如果直接写汇编，能写出效率最高的代码，但是如果是高级语言通过编译来自动转换为低级语言，那么就难以保证生成代码的执行效率了，需要各种编译优化，这是编译领域的难点。

其实想想，我们把脑中的想法，把制订好的方案转换为高级语言代码，这个过程是不是也是转换，可不可以自动化呢，这就涉及到ai了。现在有理解需求文档生成代码的智能化技术的研究方向。

那具体是怎么转换的呢？

要转换首先得了解转换的双方，要转换的是什么，转换到什么。比如高级语言到高级语言，要转换的是字符串，按照一定的格式组织的，这些格式分别叫做词法、语法，整体叫做文法，那要转换的目标呢，目标如果也是高级语言那么要了解目标语言的格式，如果目标是低级语言，比如汇编，那要了解每条指令时干啥的。然后就要进行语义等价的转换，注意这个“语义等价”，通过一门语言解释另一门语言，不能丢失或者添加一些语义，一定要前后一致才可以。

知道了转换的双方都是什么，就可以进行转换了，首先得让计算机理解要转换的东西，什么叫“计算机理解“呢？就是把我们规定的那些词法、语法格式告诉计算机，怎么告诉呢？就是数据结构，要按照一定的数据结构把源码字符串解析后的结果组织起来，计算机就能处理了。这个过程叫做 parse，要先分词，再构造成语法树。

其实不只是编译领域需要“理解”，很有很多别的领域也要“理解”：

全文搜索引擎也要先把搜索的字符串通过分词器分词，然后根据这些词去用同样分词器分词并做好索引的数据库中去查，对词的匹配结果进行打分排序，这样就是全文搜索。

前端领域都有哪些地方用到编译知识？

工程化领域各种转译器：babel、typescript、eslint、terser、prettier、postcss、posthtml、taro、vue template compiler等

js引擎：v8、javascriptcore、quickjs、hermes等

wasm：llvm可以生成wasm字节码，所以c++、rust等可以转为llvm ir的语言都可以做wasm开发

ide 的 lsp：编程语言的语法高亮、智能提示、错误检查等通过language service protocol协议来通信，而lsp服务端主要是基于parser对正在编辑的文本做分析

该怎么学习编译原理呢？

首先你要理解编译都学什么，看我上面对编译、转译、解释的科普大概能有个印象，然后查下相关资料。知道都可以干啥了之后先写parser，因为不管啥都要先parse成ast才能被“理解”和后续处理，学下有限状态机来分词和递归下降构造ast。推荐看下vue template compiler 的 parser，这种xml的parser比较简单，适合入门。语言级别的parser细节很多，还是得找一个来debug看。不过我觉得没太大必要，一般也就写个html parser，要是语言的，可以用antlr生成。转译器肯定要了解babel，这个是前端领域很不错的转译器。

js引擎可以尝试用babel做parser，自己做语义分析，解释执行ast试试，之后进一步生成字节码或其他线性ir，然后写个vm来解释字节码。

还可以学习wasm相关技术，那个是涉及到其他语言编译到wasm 字节码的过程的。

当你学完了编译原理，就大概知道怎么实现一门编程语言了，之后想深入语言设计可以多学一些其他编程范式的语言，了解下各种语言特性，怎么设计一门表达性强的gpl或者dsl。

也可以进一步学习一下操作系统和体系结构，因为编译以后的代码还是要在操作系统上以进程的形式运行的，那么运行时该怎么设计就要了解操作系统了。然后cpu指令集是怎么用电路实现的，这个想深入可以去看下计算机体系结构。