关注“重度前端”
助力前端深度学习
━━━━━
前言
详细介绍下babel的内容，处理代码的过程以及内部机制，对我们以后的工程化使用很有帮助。本文内容过多，算是抛砖引玉，让我们可以有个整体的了解，具体的知识点可以细细的研究。
Babel的解析引擎
Babel使用的引擎是babylon，babylon并非由babel团队自己开发的，而是fork的acorn项目，acorn的项目本人在很早之前在兴趣部落1.0在构建中使用，为了是做一些代码的转换，是很不错的一款引擎，不过acorn引擎只提供基本的解析ast的能力，遍历还需要配套的acorn-travesal, 替换节点需要使用acorn-，而这些开发，在Babel的插件体系开发下，变得一体化了
Babel的工作过程
Babel会将源码转换AST之后，通过便利AST树，对树做一些修改，然后再将AST转成code，即成源码。
Babel的前序工作——Babylon、babel-types：code转换为AST
Babel转AST树的过程涉及到语法的问题，转AST树一定有对就的语法，如果在解析过程中，出现了不符合Babel语法的代码，就会报错，Babel转AST的解析过程在Babylon中完成
解析成AST树使用babylon.parse方法
结果如下
AST如下
关于AST树的详细定义Babel有文档
bylon/blob/master/ast/spec.md">
https://github.com/babel/babylon/blob/master/ast/spec.md
关于AST树的定义
ast中的节点都是继承自Node节点，Node节点有type和loc两个属性，分别代表类型和位置，
其中位置定义如下
位置节点又是由source(源码string), 开始位置，结束位置组成，start,end又是Position类型
节点又包含行号和列号
再看Program的定义
Program是继承自Node节点，类型是Program, sourceType有两种，一种是script，一种是module，程序体是一个声明体Statement或者模块声明体ModuleDeclaration节点数组
Babylon支持的语法
Babel或者说Babylon支持的语法现阶段是不可以第三方扩展的，也就是说我们不可以使用babylon做一些奇奇怪的语法，换句话说
不要希望通过babel的插件体系来转换自己定义的语法规则
那么babylon支持的语法有哪些呢，除了常规的js语法之外，babel暂时只支持如下的语法
Plugins
- estree
- jsx
- flow
- doExpressions
- objectRestSpread
- decorators (Based on an outdated version of the Decorators proposal. Will be removed in a future version of Babylon)
- classProperties
- exportExtensions
- asyncGenerators
- functionBind
- functionSent
- dynamicImport
如果要真要自定义语法，可以在babylon的plugins目录下自定义语法
bylon/tree/master/src/plugins">
https://github.com/babel/babylon/tree/master/src/plugins
Babel-types，扩展的AST树
上面提到的babel的AST文档中，并没有提到JSX的语法树，那么JSX的语法树在哪里定义呢，同样jsx的AST树也应该在这个文档中指名，然而babel团队还没精力准备出来
实际上，babel-types有扩展AST树，babel-types的definitions就是天然的文档，具体的源码定义在这里
Babel的中序工作——Babel-traverse、遍历AST树，插件体系
遍历的方法
一旦按照AST中的定义，解析成一颗AST树之后，接下来的工作就是遍历树，并且在遍历的过程中进行转换
Babel负责便利工作的是Babel-traverse包，使用方法
遍历结点让我们可以获取到我们想要操作的结点的可能，在遍历一个节点时，存在enter和exit两个时刻，一个是进入结点时，这个时候节点的子节点还没触达，遍历子节点完成的时刻，会离开该节点，所以会有exit方法触发
访问节点，可以使用的参数是path参数，path这个参数并不直接等同于节点，path的属性有几个重要的组成，如下
举个栗子，如下的代码会将所有function变成另外的function
结果如下
注意这里我们使用babel-types来判别node的类型，使用path的replaceWithSourceString方法来替换节点
但这里在babel的文档中也有提示，尽量少用replaceWithSourceString方法，该方法一定会调用babylon.parse解析代码，在遍历中解析代码，不如将解析代码放到遍历外面去做
其实上面的过程只是定义了如何遍历节点的时候转换节点
babel将上面的便利操作对外开放出去了，这就构成了babel的插件体系
babel的插件体系——结点的转换定义
babel的插件就是定义如何转换当前结点，所以从这里可以看出babel的插件能做的事情，只能转换ast树，而不能在作用在前序阶段（语法分析）
这里不得不提下babel的插件体系是怎么样的，babel的插件分为两部分
babel-preset-xxx
babel-plugin-xxx
preset: 预设, preset和plugin其实是一个东西，preset定义了一堆plugin list
这里值得一提的是，preset的顺序是倒着的，plugin的顺序是正的，也就是说
preset: [‘es2015’, ‘react’], 其实是先使用react插件再用es2015
plugin: [‘transform-react’, ‘transfrom-async-function’] 的顺序是正的遍历节点的时候先用transform-react再用transfrom-async-function
babel插件编写 这里就不多说了，有兴趣的可以看下官方文档；
一些AST树的创建方法
在写插件的过程中，经常要创建一些AST树，常用的方法如下
使用babel-types定义的创建方法创建
比如创建一个var a = 1;
如果使用这样创建一个ast节点，肯定要累死了
使用replaceWithSourceString方法创建替换
使用template方法来创建AST结点
template方法其实也是babel体系中的一部分，它允许使用一些模板来创建ast节点
比如上面的var a = 1可以使用
当然也可以简单写
接下来就可以用path的增、删、改操作进行转换了
Babel的后序工作——Babel-generator、AST树转换成源码
Babel-generator的工作就是将一颗ast树转回来，具体操作如下
至此，代码转换就算完成了
结语
最后，就像babylon官网感觉acorn一样，babel为前端界做了一件awesome的工作，有了babel，不仅仅可以让我们的新技术的普及提前几年，我们可以通过写插件做更多的事情，比如做自定义规则的验证，做node的直出node端的适配工作等等。
参考资料
babel官网： https://babeljs.io
babel-github: https://github.com/babel
babylon: https://github.com/babel/babylon
acorn: https://github.com/marijnh/acorn
babel-ast文档： https://github.com/babel/babylon/blob/master/ast/spec.md
babel插件cookbook: https://github.com/thejameskyle/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md
关于本文
AlloyTeam
重度前端--助力深度学习
为web前端同行提供有价值、有深度的技术文章
官网：http://bigerfe.com【建设中】
长按二维码关注我
