Babel初步认识

BabelJS 是一个 JavaScript 转译器，它将新功能转译成旧标准。有了BabelJS，这些功能可以在新旧浏览器上兼容运行。Babeljs 以插件、预设、polyfill 等形式提供了广泛的功能。

简而言之，Babeljs 是一个工具集，其中包含所有可用的工具，它可以帮助开发人员使用 ECMA Script 中可用的所有当前功能，而不必担心浏览器将如何支持它。

首先，我们需要理解的是为什么会出现Babel，以及Babel解决了什么问题？

我们知道，现代浏览器上的标准开发语言毫无疑问就是javascript,而js又是一门不断发展变化的语言，这门语言的标准不断的更新完善，但是实现这些标准的浏览器厂商在实现这些标准的进度上有的快有的慢，不一定能那么及时的支持新的标准。但是总的来说，大部门浏览器都支持es2015。因此Babel为了解决大部门浏览器的兼容性问题，所以开发了Babel相关的工具来将新的js标准代码转化为es2015的代码，这样代码就能更好的在各种不同的浏览器上运行。

Babel是怎么解决这个问题的呢？

这里我们还是来说说具体的情况，用例子来说明能更好的理解Babel各个功能的作用，首先，我们知道在新版的js标准中有箭头函数这个语法：

const fn = ()=> {
  return 1024;
}

我们思考一下，如果你要将这个箭头函数转化成几乎大部分浏览器都可以执行的代码，应该怎么做呢？是不是应该想办法转化成es2015可以运行的函数：

var fn = function() {
  return 1024;
}

Babel在这里就是采用的预设的方式，将箭头函数转为成es2015对应的函数。具体的实现可以看源代码，这里我们只需要知道为什么会有Babel的预设这个功能就好了

再来看看下一个例子：

在es6中我们有一个新的语法叫做Promise，这个是为了解决我们的回调函数层次太多而提供的API，Babel怎么才能让这个功能在大部分浏览器上运行呢？

显然，es2015没有这个功能，如果我们自己来实现的话，那就是提供一个这样的功能，然后将这个功能绑定到浏览器的全局对象不就OK了吗？这个叫做啥？是不是应该叫做polyfill。用中文来解释就是你没有这个功能，我给你提供一个。理解了这个就容易理解为什么Babel中有很多polyfill。这个的好处是让老的浏览器也能用新的标准实现，不好的地方就是让老的浏览器的代码不那么好看。

最后一个例子我们再谈谈为啥会有插件？

我们知道插件的主要作用是增强功能，比如babel本身并不支持jsx语法的处理，我能否通过插件的机制将jsx语法转化成浏览器能够认识的语法呢？这其实也是一种转化，Babel是一个转化的工具，如果猜测没有错误的话，那么Babel转化jsx很有可能就是通过插件来实现的。

有了以上的分析和猜测，我想大家对babel的主要作用应该有可一定的认识，以后在使用的时候基于以上认知去选择的时候，往往能够给大家提供指路的作用。