官網是這麼說的，翻譯一下就是下一代JavaScript 語法的編譯器。前端
做爲前端開發，因爲瀏覽器的版本和兼容性問題，不少JavaScript的新的方法都不能使用，等到能夠大膽使用的時候，可能已通過去了好幾年。Babel就所以而生，它可讓你放心使用大部分的JavaScript的新的標準的方法，而後編譯成兼容絕大多數的主流瀏覽器的代碼。node
在升級到了Babel6.x版本以後，全部的插件都是可插拔的。這也意味着你安裝了Babel以後，是不能工做的，須要配置對應的.babelrc文件才能發揮完整的做用。下面就對Babel的presets和plugins配置作一個簡單解析。react
全部配置根據官方文檔提供，更新時間：2016-12-05。webpack
預設(presets)
使用的時候須要安裝對應的插件，對應babel-preset-xxx，例以下面的配置，須要npm install babel-preset-es2015。ios
- {
- "presets": ["es2015"]
- }
env
- {
- "presets": ["env", options]
- }
最近新增的一個選項，有如下options選擇。git
targets: { [string]: number }，默認{}
須要支持的環境，可選例如：chrome, edge, firefox, safari, ie, ios, node，甚至能夠制定版本，如node: 6.5。也使用node: current表明使用當前的版本。es6
browsers: Array | string，默認[]
瀏覽器列表，使用的是browserslist，可選例如：last 2 versions, > 5%。github
loose: boolean，默認false
是否使用寬鬆模式，若是設置爲true，plugins裏的插件若是容許，都會採用寬鬆模式。web
debug: boolean，默認false
編譯是否會去掉console.log。chrome
whitelist: Array，默認[]
設置一直引入的plugins列表。
es2015/es2016/es2017/latest
- {
- "presets": ["es2015"]
- }
es2015
使用es2015的，也就是咱們常說的es6的相關方法，簡單翻譯以下，更多細節能夠參看文檔。
- check-es2015-constants // 檢驗const常量是否被從新賦值
- transform-es2015-arrow-functions // 編譯箭頭函數
- transform-es2015-block-scoped-functions // 函數聲明在做用域內
- transform-es2015-block-scoping // 編譯const和let
- transform-es2015-classes // 編譯class
- transform-es2015-computed-properties // 編譯計算對象屬性
- transform-es2015-destructuring // 編譯解構賦值
- transform-es2015-duplicate-keys // 編譯對象中重複的key，實際上是轉換成計算對象屬性
- transform-es2015-for-of // 編譯for...of
- transform-es2015-function-name // 將function.name語義應用於全部的function
- transform-es2015-literals // 編譯整數(8進制/16進制)和unicode
- transform-es2015-modules-commonjs // 將modules編譯成commonjs
- transform-es2015-object-super // 編譯super
- transform-es2015-parameters // 編譯參數，包括默認參數，不定參數和解構參數
- transform-es2015-shorthand-properties // 編譯屬性縮寫
- transform-es2015-spread // 編譯展開運算符
- transform-es2015-sticky-regex // 正則添加sticky屬性
- transform-es2015-template-literals // 編譯模版字符串
- transform-es2015-typeof-symbol // 編譯Symbol類型
- transform-es2015-unicode-regex // 正則添加unicode模式
- transform-regenerator // 編譯generator函數
總結：經常使用的都覆蓋了，並不須要太關心內容，若是使用某些還不支持的語法致使報錯，能夠回頭查一下支持的列表。
es2016
使用es2016的相關插件，也就是es7，更多細節能夠參看文檔。
- transform-exponentiation-operator // 編譯冪運算符
es2017
使用es2017的相關插件，也就是es8？，更多細節能夠參看文檔。
- syntax-trailing-function-commas // function最後一個參數容許使用逗號
- transform-async-to-generator // 把async函數轉化成generator函數
latest
latest是一個特殊的presets，包括了es2015，es2016，es2017的插件（目前爲止，之後有es2018也會包括進去）。
react
react是一個比較特別的官方推薦的presets，大概是由於比較火吧。加入了flow，jsx等語法，具體能夠看文檔。
stage-x(stage-0/1/2/3/4)
stage-x和上面的es2015等有些相似，可是它是按照JavaScript的提案階段區分的，一共有5個階段。而數字越小，階段越靠後，存在依賴關係。也就是說stage-0是包括stage-1的，以此類推。
stage-4
已完成的提案，與年度發佈的release有關，包含2015年到明年正式發佈的內容。例如，如今是2016年，stage-4應該是包括es2015，es2016，es2017。通過測試，babel-preset-stage-4這個npm包是不存在的，若是你單純的須要stage-4的相關方法，須要引入es2015~es2017的presets。
stage-3
除了stage-4的內容，還包括如下插件，更多細節請看文檔。
- transform-object-rest-spread // 編譯對象的解構賦值和不定參數
- transform-async-generator-functions // 將async generator function和for await編譯爲es2015的generator。
stage-2
除了stage-3的內容，還包括如下插件，更多細節請看文檔。
- transform-class-properties // 編譯靜態屬性(es2015)和屬性初始化語法聲明的屬性(es2016)。
stage-1
除了stage-2的內容，還包括如下插件，更多細節請看文檔。
- transform-class-constructor-call // 編譯class中的constructor，在Babel7中會被移除
- transform-export-extensions // 編譯額外的exprt語法，如export * as ns from "mod";細節能夠看這個
stage-0
除了stage-1的內容，還包括如下插件，更多細節請看文檔。
- transform-do-expressions // 編譯do表達式
- transform-function-bind // 編譯bind運算符，也就是
::
插件(plugins)
其實看了上面的應該也明白了，presets，也就是一堆plugins的預設，起到方便的做用。若是你不採用presets，徹底能夠單獨引入某個功能，好比如下的設置就會引入編譯箭頭函數的功能。
- {
- "plugins": ["transform-es2015-arrow-functions"]
- }
那麼，還有一些方法是presets中不提供的，這時候就須要單獨引入了，介紹幾個常見的插件。
transform-runtime
- {
- "plugins": ["transform-runtime", options]
- }
主要有如下options選擇。
helpers: boolean，默認true
使用babel的helper函數。
polyfill: boolean，默認true
使用babel的polyfill，可是不能徹底取代babel-polyfill。
regenerator: boolean，默認true
使用babel的regenerator。
moduleName: string，默認babel-runtime
使用對應module處理。
這裏的options通常不用本身設置，用默認的便可。這個插件最大的做用主要有幾下幾點：
- 解決編譯中產生的重複的工具函數，減少代碼體積
- 非實例方法的poly-fill，如
Object.assign，可是實例方法不支持，如"foobar".includes("foo")，這時候須要單獨引入babel-polyfill
更多細節參見文檔。
transform-remove-console
- {
- "plugins": ["transform-remove-console"]
- }
使用這個插件，編譯後的代碼都會移除console.*，媽媽不再用擔憂線上代碼有多餘的console.log了。固然不少時候，咱們若是使用webpack，會在webpack中配置。
這也告訴咱們，Babel不只僅是編譯代碼的工具，還能對代碼進行壓縮，也許有一天，你再也不須要代碼壓縮的插件了，由於你有了Babel！
自定義預設或插件
Babel支持自定義的預設(presets)或插件(plugins)。若是你的插件在npm上，能夠直接採用這種方式"plugins": ["babel-plugin-myPlugin"]，固然，你也能夠縮寫，它和"plugins": ["myPlugin"]是等價的。此外，你還能夠採用本地的相對路徑引入插件，好比"plugins": ["./node_modules/asdf/plugin"]。
presets同理。
plugins/presets排序
也許你會問，或者你沒注意到，我幫你問了，plugins和presets編譯，也許會有相同的功能，或者有聯繫的功能，按照怎麼的順序進行編譯？答案是會按照必定的順序。
- 具體而言，plugins優先於presets進行編譯。
- plugins按照數組的index增序(從數組第一個到最後一個)進行編譯。
- presets按照數組的index倒序(從數組最後一個到第一個)進行編譯。由於做者認爲大部分會把presets寫成
["es2015", "stage-0"]。具體細節能夠看這個。
總結
由於本身對.babelrc文件的設置有點疑問，花了大半天擼了下官方的文檔。不少內容是英文的，可能翻譯並不許確，但願你們多多指教。
- {
- "presets": [
- "es2015",
- "stage-0"
- ],
- "plugins": ["transform-runtime"]
- }
json
這是我寫了半天發現比較推薦的配置(真的是太簡單了，還花了這麼久去看文檔)。強烈推薦使用transform-runtime。
固然，若是你的項目須要react或者flow這些語法的編譯，請在presets里加入對應的值便可。若是你須要非實例方法"foobar".includes("foo")之類的方法，按需引入babel-polyfill。