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, 爲何解構這裏轉錯了，經過上面這些理解應該就很容易找到問題緣由了。