什么是babel

---

babel的官网上是这么说的：babel是JS的compiler。

但是我觉得babel更像是一个JS的transpiler，将js中的es2015/2016/2017等JS新语法转换成普通旧版本es5，让低端的运行环境（浏览器&node）能够认识并执行。

什么是transpiler？

transpiler转换器，也被称为source-to-source compiler，他的作用是：

• parsing（解析）使用某种语言写的source code
• transpiling（转换）成使用另外一种语言编写的等效代码

transpiling例子

• 将scss transpiling css
• 将typescript transpiling js

compiling vs transpiling

• compiling

将source code编译成较低级别的语言，例如java --> 字节码

• transpiling

将source code编译成同级别的等效语言，例如 scss --> csss

babel作用

---

babel的作用主要分成两部分：

• Transpiler

随着技术的快速发展，我们有ES6789...发布，这样就会有很多新的语法，我们希望能够迫切的使用这些新语法，但是浏览器未必能够识别且支持。
那么就需要babel帮我们去做这些Transpiler工作，将我们使用的新syntax Transpiler 成浏览器可识别的语法。

• Polyfill

ES678发布的一些feature，比如async/await、Promises、Map、Set，还有一些新的API，比如includes、
Array.from, Array.of,Array#find,Array.buffer, Array#findIndex等，这些并不是所有浏览器都能支持。
因此需要Polyfill帮助我们使用老的浏览器能够识别的API或者feature实现这些新的feature。

总结

Transpiler完成新旧语法的转换，Polyfill帮助我们实现新的feature。

babel工作流

---

babel的工作主要分成三个阶段：

解析（Parsing）

Babel会将源代码source code 解析成AST(Abstract Syntax Tree)。
AST是源代码的抽象语法结构的树形表示。

这个步骤是由Babel’s babylon parser实现的。

转换（Transformation）

这是babel最重要的步骤，babel会将上一个步骤产生的AST转换成浏览器可识别的AST。

这一个步骤是由Babel plugin/prese实现的。

babel本身不具有任何的转换功能，其实所有的转换工作都是由不同的plugins/presets指导完成的。因此当我们不配置任何插件时，经过 babel的代码和输入是相同的。

这些plugins相当于是告诉babel如何转换现在的代码。
babel通过使用babel-traverse去遍历整个AST，遍历到的节点都有plugins帮助我们去做这个节点的语法转换。

因此这个步骤之后，上一个步骤产生的AST，就会在plugins的指导下被更改成新的AST。

plugins vs presets

• plugin就是一个插件，定义如何将语法A转换成语法B。比如某一个插件就可以指导如何将Arrow function转换成ES5 function。
• presets是一堆plugin的集合，实现整体转换。
  • @babel/preset-react presets实现jsx语法 --> ES5
  • @babel/preset-react presets实现ES678 --> ES5

生成代码（Code Generation）

这个步骤是将上一步产生的new AST转成source code
这步骤是由babel-generator实现的。其实就将AST转回代码

image.png