关于Babel

什么是Babel

巴别塔

传说古时候一群人想建一个通天塔，去天上看看上帝在干什么。上帝于是挥挥手，让这群人说不同的语言，于是他们再也不能顺畅沟通，塔也就建不起来了。

在JavaScript中，不同版本的浏览器对JavaScript的版本各有要求，而Babel的出现是的开发者几乎不用考虑浏览器的支持情况，尽情享受最新语法的舒适。

Babel is a JavaScript compiler.

Babel是一个编译器，能将ES2015+的代码转换正ES2015。

如上图，左侧的ES6结构语法转换成ES5的按照下标取数组元素。

Babel做了什么？

解析 （Parsing）

通过词法分析和语法分析，将JavaScript源代码转换成抽象语法树。

转换 （transforming）

对语法树（ast）进行转换操作，把ES2015+的部分转换为ES5。

再建 （generation）

将转换之后的语法树重新生成代码。

插件机制

Now, out of the box Babel doesn't do anything. It basically acts like const babel = code => code; by parsing the code and then generating the same code back out again. You will need to add plugins for Babel to do anything.
来源： 官方文档 plugin

按照 解析-> 转换 -> 再建的步骤，ES2015+怎么就转换成了ES2015呢？这依赖于在babel在转换阶段做的手脚，而如何转换需要我们配置一系列转换的插件。

但是我们往往不用手动去配置plugin，因为维护一大堆plugin十分困难，试想我们准备使用所有的ES6语法。

preset是一堆plugin的简写

如果我们指定presets为 babel-preset-env, 那么就默认包含了转换所有ES5+标准语法的plugin。
这里可以理解presets只是一个语法糖，帮我们做了维护插件集这件事情。

Babel做什么，不做什么

Babel只对不属于ES5的语法做了转换，如：

1. for-of
2. 箭头函数
3. 结构
4. 块级作用域
5. let/const

但下面情况不作处理：

1. 一些内置的全局变量，如：Promise、Symbol、Set、WeakMap
2. 对一些Object新增的方法，如： Array.includes、Object.is
3. generactor 函数。

谁来处理上面的情况？

Babel-polyfill

为了能使用Promise、WeakMap等，我们可能需要考虑引入babel-polyfill了。它会检测运行环境是否支持Promise等，如果不支持，会创建全局的Promise等对象或者给Array等新增方法。

Babel-runtime

Babel-runtime也能起到几乎一样的作用，但它跟Babel-polyfill不同的是它不会污染全局作用域。它会提供一个module, 当使用Promise时，它会把这个module的某个对象导出给使用的地方。

所以如果需要考虑到对原型或者全局变量的污染，我们应该使用babel-runtime，比如说我们需要开发一个公共库开源出去。