Babel是什么，作用是什么，怎么实现的

Babel是什么，作用是什么

Babel 是一个 JavaScript 编译器，它能让开发者在开发过程中，直接使用各类语言（如 TS、Flow、JSX）或新的语法特性，而不需要考虑运行环境，因为 Babel 可以做到按需转换为低版本支持的代码；Babel 内部原理是将 JS 代码转换为 AST，对 AST 应用各种插件进行处理，最终输出编译后的 JS 代码。

**Babel的功能非常纯粹，以字符串的形式将源代码传给它，它就会返回一段新的代码字符串。**

在开发中我们在写es6+语法的时候是不是很方便，什么promise、async await`，可是es6+语法写的虽然很酸爽，但是浏览器他不兼容啊，你想想你写的代码在浏览器上跑不起来，在好的语法在好的特性又有什么用？这个时候Babel这样一个工具出来了，他可以将我们写的es6+语法转换为浏览器兼容的语法，比如将箭头函数转换为普通函数，有了这样一个工具我们就即可以写酸爽的语法，又可以让使浏览器兼容。

在开发蜂巢指纹浏览器(NestBrowser)期间，也尝试深入了解Babel实现，积累了一些资料。

Babel怎么实现的

官网：Babel · The compiler for next generation JavaScript

源码：GitHub - babel/babel: 🐠 Babel is a compiler for writing next generation JavaScript.

开发语言如下图：

• TypeScript70.8%

• JavaScript28.4%

​

Babel 的编译过程和大多数其他语言的编译器相似，可以分为三个阶段：

        1、解析（Parsing）：将代码字符串解析成抽象语法树。

        在这一步Babel 拿到源代码会把代码抽象出来，变成 AST （抽象语法树）。

        AST是怎么来的？

                a、分词：将整个代码字符串分割成语法单元数组

                b、语法分析：建立分析语法单元之间的关系

        语义分析则是将得到的词汇进行一个立体的组合，确定词语之间的关系。考虑到编程语言的各种从属关系的复杂性，语义分析的过程又是在遍历得到的语法单元组，相对而言就会变得更复杂。

        2、转换（Transformation）：对抽象语法树进行转换操作。

转换的主要操作就是加载各种插件（Plugins）来完成语法的转换。在 Babel 的配置项中填写需要使用的插件名称，Babel 在编译的时候就会去加载 node_modules 中对应的 npm 包，然后编译插件对应的语法。

        3、生成（Code Generation）: 根据变换后的抽象语法树再生成代码字符串

用 babel-generator 通过 AST 树生成 ES5 代码。

蜂巢指纹浏览器(NestBrowser)选择Babel转换Typescript到Javascript，没有选择原生的TSC，也是看中Babel的丰富扩展性和最大兼容性

最后附一个模拟实现babel功能的链接，有兴趣的可以深入探索下：《从 0 到 1 手写 babel》思路分享_frontend_frank的博客-CSDN博客