摘要

本文介绍了 Babel 的简介、微内核架构、运行时相关模块，还探讨了 ECMAScript 标准化等内容，阐述了 Babel 的设计思路与标准规范的配合值得借鉴之处。

一、Babel 简介

Babel 是 JavaScript 转译器，能将高版本 ECMAScript 语法转译为低版本语法，使代码可在各类环境运行。

• 转译与编译有区别，转译是转换为相同或不同版本、抽象程度相同的语言，编译是转换为语法和抽象程度等都不同的语言。
• Babel 转译时处理语法转译和 API Polyfill 两部分。语法部分支持识别高版本语法并转译，如箭头函数转普通函数。API Polyfill 解决运行时相关 API 在低版本环境的兼容性，如处理[1, 2, 3].include、Promise等 API。
• 有多种使用 Babel 的方式，如命令行（babel - cli、babel - node）、浏览器（babel - standalone）、API 调用（babel - core）、webpack loader（babel - loader）等。
• Babel 运行生命周期包括解析、转换、代码生成三个阶段。
  • 解析（Parsing）：包含词法解析和语法解析，词法解析将代码字符串转为token令牌数组，语法解析将token数组转为抽象语法树（AST），由babel - parser完成。
  • 转换（Transformation）：Babel生成AST后，babel - traverse遍历AST节点，根据配置的plugins/presets进行增删改查操作。
  • 代码生成（Generation）：babel - generator将修改后的AST对象转成目标代码字符串。

二、Babel 微内核架构

（一）微内核架构

Babel 采用微内核架构，内核保留核心功能，其余功能通过外部工具和插件机制实现，体现“开放 - 封闭”原则。

（二）转译模块

转译模块位于微内核部分，负责代码转译，主要包括babel - parser、babel - traverse、babel - generator。

• babel - parser将代码字符串转为AST对象，不做转换操作，内置对多种语法的支持，但部分默认不开启且无插件机制扩展新语法。
• babel - traverse在转译中遍历AST节点，按配置操作节点，采用深度优先遍历。
• babel - generator将AST节点转为代码字符串并可生成source - map。

（三）插件模块

插件模块包括plugins、presets。

• 语法插件作为“开关”，配置是否开启babel - parser的某些语法转译功能，在源码中以babel - plugin - syntax开头。
• 转换插件负责转换AST节点，提供Visitor对象，在其中定义节点进入和离开时的回调函数进行操作，在源码中以babel - plugin - transform开头。
• presets是插件集，方便在实际开发中支持各类语法，以babel - preset开头，如babel - preset - env等。
• 插件运行顺序：plugins在presets之前运行，plugins按数组正序执行，presets按数组倒序执行。

（四）工具模块

• babel - core对外提供 Babel 多项功能的 API，转译类 API 有同步和异步版本。
• babel - cli是命令行工具，可转译文件夹/文件并有很多配置项。
• babel - standalone提供浏览器下转译方案，内置所有 Babel 插件，适合开发学习，不适合生产环境。
• babel - node提供在命令行执行高级语法的环境，与babel - cli不同在于会在node运行时执行转换。
• babel - register通过拦截node require方法为node运行时引入 Babel 转译能力。
• babel - loader是webpack loader，用于webpack构建过程。
• babel - types是工具集合，用于节点校验等操作。
• babel - template是模板引擎，将代码字符串转为AST节点对象。
• babel - code - frame负责打印出错代码位置。
• babel - highlight向控制台输出有颜色的代码片段。

（五）运行时相关模块

运行时模块关注转译产物的运行时环境，提供 API polyfill、代码优化等，涉及babel - preset - env、babel - plugin - transform - runtime、babel - runtime、babel - runtime - corejs2/3、core - js等子包。以index.js转译为ES5版本为例解释了相关配置的原理。

三、标准化

（一）ECMAScript

• ECMAScript 由 Ecma International 制定标准，TC39负责迭代发展。ECMA - 262是 JavaScript 标准语言规范。
• ECMAScript 各版本有不同特点，标准制作过程有Stage 0到Stage 4共 5 个阶段，特性进入Stage - 4后才可能被加入标准并需表决通过。
• ECMAScript 文档可在官网免费下载和在线阅读，不同版本有独立网址。文档结构包括介绍部分、规格文件本身描述、语言总体设计描述、宏观层面描述、具体语法等内容。通过阅读规格可解决一些问题，如识别关键词和保留字、识别全局对象、了解原生Error类规范等。

（二）web 标准

core - js除提供 ECMAScript 标准下的 API 实现，也提供 DOM/URL 等实现，DOM/URL 所属的 web 标准由W3C/WHATWG制定，二者目前是合作关系。

四、总结

本文介绍了 Babel 的相关知识，包括其架构、运行时模块以及与 ECMAScript 标准化相关的内容，强调 Babel 的设计思路与标准规范配合之处值得学习。