babel编译配置的正确姿式

缘起

在使用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, 为何解构这里转错了，经过上面这些理解应该就很容易找到问题缘由了。