https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/
當開發react或者vuejs app時，開發者可能經常需要在不同的babel configuration(.bablerc)中切換。你應該在package.json文件中見到過以下代碼:
// package.json { "babel": { "presets": [ "es2015", "stage-0" ] } }
或者在.babelrc文件中，可能看到下面的東西:
// .babelrc { "plugins": ["transform-class-properties"] }
本文，我們就好好說道說道這個stage-x是個啥，以及為什么我們這樣來配置babel，也就是說我們將探討babel plugins和presets.
什么是Babel?
為了理解為什么會出現Babel,我們就需要了解一下javascript的歷史了。。。
ES5,ES6,ES7
我們知道javascript是web語言，她在不同瀏覽器中運行，比如chrome,firefox,safari,edge,ie等。不同的瀏覽器會有不同的javascript解釋器，js就由這些解釋器引擎翻譯和運行。由於js被internet界廣泛接受，應用越來越多，隨后就有了規范組織用於管理js語言本身的規范。js所遵循的sepec就稱為ecmascript或者ES
其中的第5版被稱為ES5.你可以將ES5想象為js語言本身的一個版本，該版本在2009年定稿,目前主流瀏覽器全部實現了ES5.
而第6個版本被稱為ES6，最終在2015年定稿，目前主流瀏覽器大都還沒有支持其功能。
ES7則是基於ES6做了更多的改進，最新版本於2016年初步定稿，ES7只有兩個新的功能.
作為js的未來，我們希望直接在今天就開始使用ES6/ES7，但是我們也希望我們的代碼能夠在目前的主流瀏覽器中能夠正確地運行，這就是Babel為什么能夠產生地原因。(除了babel, typescript也可以實現類似地功能)babel允許我們完全以ES6/ES7規范來寫js代碼，同時編譯成es5地代碼，以便最終可以在當前並未實現es6規范的瀏覽器上運行
使用babel
在項目中，我們可以以幾種方式來使用babel.最簡單和快捷的方式是使用一個package babel-standalone.你可以通過一個script tag來引用它。
<script
src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"
></script>
引入babel以后，babel就會自動將任何以text/babel為type的script進行stranpile
<div id="output"></div> <script type="text/babel"> const getMessage = () => "Hello World"; // ES6! document.getElementById('output').innerHTML = getMessage(); </script>
像create-react-app這樣的項目會自動地引用並且配置好babel，因此你可以0配置開始寫react components
Babel Plugins和presets
babel提供了一種開放的架構，通過plugin來對不同的feature做transformation.由於feature特別多，那么就會對應着bable plugin特別多，如何管理好這些plugin也是一個挑戰。
在babel中，a preset is a set of plugins used to support particular language features.
Presets are sharable .babelrc configs or simply an array of babel plugins.
有兩個preset會被babel默認使用:
es2015: 增加對ES2015功能地支持
react: 支持JSX
記住:ES2015僅僅是ES6的另外一種叫法，我們使用ES2015 preset因為我們不會使用ES7的新功能
除了ES7,js features可以在不同的stages中存在。一個feature可以是一種experimental proposal(實驗性質)的，也就是說社區還在就一些細節進行研究(stage1).
experimental proposals有非常大的風險會被舍棄或者大幅修改。一個feature也可能是ratified狀態的(批准)，將會被在下一個js的release中包含("stage4")
具體地：
TC39工作組將proposals分門別類為以下stages:
- stage-0 - Strawman: just an idea, possible Babel plugin.
- stage-1 - Proposal: this is worth working on.
- stage-2 - Draft: initial spec.
- stage-3 - Candidate: complete spec and initial browser implementations.
- stage-4 - Finished: will be added to the next yearly release.
我們可以通過使用presets或/和 plugins配置babel來嘗鮮或者使用這些即將到來的或者說實驗性質的功能.
哪些plugins或者presets是"safe"的？
babel會針對那些早於stage-3的feature做出警告，因為他們可能會被廢棄或者大幅修改。特別是如果你從事教育工作，最好不要教授那些feature,因為很有可能會舍棄
如何使用babel plugin和presets
有兩種主要的配置babel方式。
- 在package.json文件中
你可以像下面的package.json文件一樣羅列出對應的presets和plugins列表：
// package.json { "babel": { // nest config under "babel" "presets": [ "es2015", "react", "stage-3" ], "plugins": ["transform-class-properties"] } }
2..babelrc
// .babelrc { "presets": [ "es2015", "react", "stage-3" ], "plugins": ["transform-class-properties"] }
一般比較推薦通過.babelrc方式來配置babel