logo

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

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

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

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

在开发E蜘蛛瀏覽器(EspiderBrowser)期间, 也尝试深入了解Babel实现, 积累了一些资料。

Babel怎么实现的

官网：https://babeljs.io/

源码：https://github.com/babel/babel

开发语言如下图：

  • TypeScript70.8%
  • JavaScript28.4%

Untitled

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

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

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

AST是怎么来的？

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

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

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

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

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

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

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

E蜘蛛瀏覽器(EspiderBrowser)选择Babel转换Typescript到Javascript, 没有选择原生的TSC, 也是看中Babel的丰富扩展性和最大兼容性

最后附一个模拟实现babel功能的链接, 有兴趣的可以深入探索下：https://blog.csdn.net/frontend_frank/article/details/119258969