缘起

在使用babel编译的时候，或者用babel-loader的时候，需要对babel进行一些参数的配置，用来指定babel编译的一些行为， 因此我们就会使用到诸如：presets: ['es2015/es2016/es2017/env', 'stage-0/stage-1/stage-2/stage-3],babel-polyfill等一些配置， 因此接下来就捋捋这些是干啥用的。

捋下这些概念的起因就是使用中为啥我用了babel一些高级语法没有转， 以及为什么使用的时候报错了（一脸懵逼）。

babel的配置属性

babel的配置是从文件.babelrc中读取的，在webpack打包的时候， 也可以在babel-loader中配置， 主要有两个属性，presets和plugins。

* presets

presets是一些插件预设，代表的就是一堆插件的集合，比如： es2015包含插件有：

1. transform-es2015-arrow-functions // 编译箭头函数2. transform-es2015-block-scoped-functions // 函数声明在作用域内3. transform-es2015-block-scoping // 编译const和let...等等复制代码

可以理解为一个插件帮忙编译新一代js的某一个语法功能， 一个预设项就是一堆插件的集合。 所以es2015/.../es2017这些就表示里面包含的插件不一样， 具体就可以参看文档了。 stage-x和上面的类似，按照js的提案进行进行区分： 预设中的插件包含关系是： stage-0 > stage-1 > stage-2 > stage-3。

* plugins

这个就是单独的插件配置了，比如需要引入编译箭头函数，就可以加入这个插件：

{  "plugins": ["transform-es2015-arrow-functions"]}复制代码

* babel-polyfill

看名字就知道， babel的一个垫片插件，babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign, Array.form等）都不会转码， 对于低版本的浏览器可能并不支持这样的语法， 因此需要转换。其实也就是修改了全局作用域（node下的global，浏览器下的window对象）

*babel-plugin-transform-runtime

以插件的形式取代了babel-polyfill, 不会污染全局变量

总结：

主要就是一些概念上的理解，不涉及深入的研究，了解这些的区别比较有利于工程上的使用，以及问题的排查。像为什么我的babel没有转Promise, 为什么解构这里转错了，通过上面这些理解应该就很容易找到问题原因了。