babel介绍
什么是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转回代码