Babel

简单地说，Babel 能够转译 ECMAScript 2015+ 的代码，使它在旧的浏览器或者环境中也能够运行。

Babel 本质上就是在操作 抽象语法树（Abstract Syntax Tree, AST） 来完成代码的转译。

Babel 原理：首先将源码转成抽象语法树，然后对语法树进行处理生成新的语法树，最后将新语法树生成新的 JS 代码，整个编译过程可以分为 3 个阶段 parsing (解析)、transforming (转换)、generating (生成)

3. 模板引擎

一个模板引擎就是把一个字符串中的变量用model的变量替换掉。

如何实现一个最简模板引擎

1. 正则抠出要匹配的内容
2. 装入数组
3. 分辨js逻辑部分
4. 引擎函数
5. 把data扔进去

Vue 模板编译原理

• 第一步是将 模板字符串 转换成 element ASTs（解析器）
• 第二步是对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化（优化器）
• 第三步是 使用 element ASTs 生成 render 函数代码字符串（代码生成器）

Vue 模板编译过程

• 解析开始标签：这段模板字符串会扔到 while 中去循环，然后 一段一段 的截取，把截取到的 每一小段字符串 进行解析，直到最后截没了，也就解析完了。
• 维护stack：用正则把 开始标签 中包含的数据（attrs, tagName 等）解析出来之后还要做一个很重要的事，就是要维护一个 stack。这个 stack 是用来记录一个层级关系的，用来记录DOM的深度。
• 截取文本：继续上面的例子解析剩余的模板字符串
• 解析文本：
• 处理结束标签，pop出来