在这个阶段，Babel接受得到AST并通过babel-traverse对其进行 深度优先遍历，在此过程中对节点进行添加、更新及移除操作。这部分也是Babel插件介入工作的部分。
生成将经过转换的AST通过babel-generator再转换成js代码，过程就是 深度优先遍历整个AST，然后构建可以表示转换后代码的字符串。
在上面的示例中，首先生成两个 MethodDefinition 节点的代码，然后生成类主体节点的代码，最后生成类声明节点的代码。
使用 TypeScript 进行转换另一个利用转换的流行框架是 TypeScript。它引入了一种用于编写 JavaScript 应用程序的新语法，该语法被转换为任何浏览器或引擎都可以执行的 EMCAScript 5。下面是用 Typescript 实现 Component :
class Component { content: string; constructor(content: string) { this.content = content; } render() { console.log(this.content) } }转成抽象语法树如下：
Typescript 还支持继承：
class InputField extends Component { constructor(value: string) { const content = `<input type="text" value="${value}" />`; super(content); } }以下是转换结果：
var InputField = /** @class */ (function (_super) { __extends(InputField, _super); function InputField(value) { var _this = this; var content = "<input type=\"text\" value=\"" + value + "\" />"; _this = _super.call(this, content) || this; return _this; } return InputField; }(Component));最终的结果还是 ECMAScript 5 代码，其中包含 TypeScript 库中的一些函数。封 __extends 中的逻辑与在第一节中讨论的逻辑相同。
随着 Babel 和 TypeScript 被广泛采用，标准类和基于类的继承成为了构造 JavaScript 应用程序的标准方式，这推动了在浏览器中引入对类的原生支持。
类的原生支持2014年，Chrome 引入了对 类的原生支持，这允许在不需要任何库或转换器的情况下执行类声明语法。
本地实现类的过程就是我们所说的语法糖。这只是一种奇特的语法，它可以编译成语言中已经支持的相同的原语。可以使用新的易于使用的类定义，但是它仍然会创建构造函数和分配原型。
撯着，看看在 V8 中对 ECMAScript 2015 类的本机支持的工作原理。正如在 前一篇文章 中所讨论的，首先必须将新语法解析为有效的 JavaScript 代码并添加到 AST 中，因此，作为类定义的结果，一个具有 类型的新节点被添加到树中。
这个节点存储了一些信息。首先，它将构造函数作为一个单独的函数保存，还保存类属性的列表，这些属性包括 方法、getter、setter、公共字段或私有字段。该节点还存储对父类的引用，该类将继承父类，而父类将再次存储构造函数、属性列表和父类。
一旦这个新的类 ClassLiteral 被 ，它又被转换成函数和原型。
原文：
关于FundebugFundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件，付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用！
