工程未编译怎么解决_前端开发工程师怎么学好编译原理？

---

前言 看到标题你可能有同样的疑惑: "我不可能自己去写一门新的语言，还有必要学习编译原理吗？" 说到编译前端程序员有很多可谈，比如离不开的Babel、Coffee、TypeScript、Webpack UglifyJS压缩代码 ...它们都使用了编译技术，如果你要深入理解和用好这类工具甚至想为前端领域提供像 React 那样的 DSL，像 TypeScript 那样把一门语言翻译成另一门语言，像 CMake 和 Maven 那样通过配置文件来灵活工作，都要用到编译技术。 什么是编译器？ 简单的讲编译器就是将 源代码 转换成 目标代码 的工具。详细一点如下(引用自维基百科)： "

它主要的目的是将便于人编写、阅读、维护的高级计算机语言所写作的 源代码 程序，翻译为计算机能解读、运行的低阶机器语言的程序。源代码 一般为高阶语言(High-level language)，如Pascal、C、C++、C# 、Java等，而目标语言则是汇编语言或目标机器的目标代码(Object code)。

" 编译器所包含的概念很多，比如 词法分析(lexical analysis)，句法分析(parsing)，类型检查/推导，代码优化，代码生成...等等。 我用一张图直观地展现了编译器的整个编译过程。

这里的 "前端" 指的是编译器对程序代码的分析和理解过程。 它通常只跟语言的语法有关，跟目标机器无关。 而与之对应的 "后端(Back End)" 则是生成目标代码的过程，跟目标机器有关。 在前端领域里用到编译技术的工具大部分使用了编译器的前端技术解决文本分析，语言翻译...。 所以我们侧重点也会是编译器的前端技术即词法分析、语法分析和语义分析。 Vue编译器 Vue 编译器大致也分为三个阶段: 词法分析  、 句法分析 、代码生成。在词法分析阶段 Vue 会把字符串模板解析成一个个的令牌(token)，该令牌将用于句法分析阶段，在句法分析阶段会根据令牌生成一棵 AST，最后再根据该 AST 生成最终的渲染函数，这样就完成了代码的生成。

图解Vue编译器运行机制 Vue编译器会把你写的组件模板给到 parse函数，通过parse 解析为抽象语法树(AST)，optimize 给 AST对象中的静态节点进行标注， generate 拿到AST对象生成渲染函数所需的字符串。渲染函数在组件挂载时的代用生成Virtual DOM, updata函数中有两个分支，首次渲染( initial render )把Vritual DOM映射成真正的DOM。数据更新的时候获取新旧的Vritual DOM通过diff 算法比对差异更新视图。 那么如果想深入全面理解Vue的编译器实现原理源码，该怎么去下手呢？

详情咨询老师 长按扫码加好友