ECMAScript的現狀
ECMAScript，本身是一個腳本語言的設計規范，基於此規范，有許多為人熟知的語言，如JavaScript、ActionScript等。而時至幾年前，隨着Node.js的出現，以及HTML5帶來的諸多新WebAPI，讓JavaScript一下子提升到一個無比重要的位置。時至那個階段，我們可以統稱當時為ECMAScript5（ES5）。
那之后，很快就開始了對ECMAScript 2015（ES6）的制定，ES6一洗JS過去諸多的奇淫巧技、含糊不清的地方，帶入了很多現代編程語言的特性，而且其推行的速度遠比HTML5和CSS3要快。而在今天討論ES6的時候，實際上ECMAScript 2016（ES7）已經在制定中（目前其實主要是修正和彌補ES6的不足），很多已經可以使用在實際生產環境中。
然而如上所述，即使是ES6，仍然有許多不足之處，所以急匆匆的ES7上線了，縱然你在使用ES6了，但是以今天的技術發展速度來說，既然ES7有了修正案，盡早的切入到ES7才能跟得上時代的步伐。
而JavaScript是一門需要環境依托運行的語言，無論是Browser環境下，還是服務器環境下，都需要環境的支持。下面這個列表，可以看到你的瀏覽器，和當前市面可支持JavaScript環境對ES6的支持情況：
https://kangax.github.io/compat-table/es6/
Babel
這時候，如果希望嘗試使用ES6/ES7的，則可以使用Babel這個轉譯器。Babel本身的設計，就是針對JavaScript（所有需要轉換為JavaScript）進行設計的。所以如官網的宣傳語所說：
Babel transforms your JavaScript
Babel的官方網站： babeljs.io
Babel本身的設計是基於node.js環境下運行使用的，你也可以將babel-core用於瀏覽器環境。同時，有一個叫做 babel-standalone 的開源項目，則支持非node.js環境下使用Babel。
所以本文注重說明的是，基於node.js環境下配置和使用Babel的說明。
從深到潛，可以簡單的將node.js下的配置使用情況區分為：CLI => 各種環境配置（GULP、IDE等）。
CLI環境
一般來說，使用Babel都是在各種環境內使用的，而很少直接使用CLI模式，但是這個模式能幫助理解Babel的基本配置。Babel有一大堆轉換器插件，所以搞清楚他的配置方式是很必要的。
官方的博客有一篇基礎環境下的安裝說明： https://babeljs.io/blog/2015/10/31/setting-up-babel-6 ，這個篇章我只是將這個教程作為簡單的翻譯。
Babel基本安裝
你有兩個選項，全局的npm環境安裝babel-cli，或當前項目下安裝babel-core：
`shell
npm install --global babel-cli // or npm install --save-dev babel-core
`
添加插件（Plugins）
你可以在項目的根目錄添加一個 .babelrc 文件（json格式）。
假定你需要一叫做 es2015-arrow-functions 的特性支持：
`shell
npm install --save-dev babel-plugin-transform-es2015-arrow-functions
`
注意，這是在當前項目目錄添加的npm。
並修改 .babelrc 文件，將這個插件注冊：
`json
{
"plugins": ["transform-es2015-arrow-functions"] }
`
Babel提供了許多ES7的插件，具體可以查詢官網的插件列表： Babel Plugins List。
插件的命名機制
這里特別說明一下，Babel的插件名的命名機制的問題
首先，你可以在 Babel Plugins List 查詢到插件的列表，你會看到以下的內容：
可以看到插件名稱，是諸如：es2015-arrow-functions、es2015-block-scoped-functions、es2015-block-scoping等。
其次，對應的在 Babel的github上的項目 中的 packages目錄 下，上述的幾個插件，名稱則對應為：
`shell
es2015-arrow-functions => babel-plugin-transform-es2015-arrow-functions es2015-block-scoped-functions => babel-plugin-transform-es2015-block-scoped-functions es2015-block-scoping => babel-plugin-transform-es2015-block-scoping
`
再次，這些插件寫入到 .babelrc 的配置文件中的名稱，則對應為：
`shell
es2015-arrow-functions => transform-es2015-arrow-functions es2015-block-scoped-functions => transform-es2015-block-scoped-functions es2015-block-scoping => transform-es2015-block-scoping
`
為了統一稱呼，我們定義如下：
插件名- 形如：es2015-arrow-functions、es2015-block-scoped-functions、es2015-block-scoping
插件（安裝）包名- 形如：babel-plugin-transform-es2015-arrow-functions、babel-plugin-transform-es2015-block-scoped-functions、babel-plugin-transform-es2015-block-scoping
配置名- 形如：transform-es2015-arrow-functions、transform-es2015-block-scoped-functions、transform-es2015-block-scoping
一般來說，在 .babelrc 中，或者是gulp中，或者是使用 babel-standalone 的在線轉譯功能，都使用的是 配置名 。一定要區分這三者的區別，不然很容易出錯。
Babel預設值（Presets）
目前作為Babel官方的預設，主要包含以下的內容：
這些預設，包含了相關所需的插件包，在你的babel配置中（.babelrc），可以混合多個preset使用，同時還可以在此基礎上追加plugin。
使用預設置，和插件的用法類似，先執行npm安裝所需的包，然后在配置中加載：
`shell
npm install --save-dev babel-preset-es2015 babel-preset-react
`
在 .bablerc 文件中
`json
{
"presets": ["es2015", "react"] }
`
gulp中使用
要在gulp中使用Babel是一個很簡單的事情， 官方提供了簡單教程 ，這里我就不翻譯了，因為很簡單。
特別說明一下的是，如果你需要在gulp使用Babel的某個插件，必須npm安裝在當前項目中，而不能使用global。也即：
npm install babel-preset-es2015 --save-dev
。
gulp支持使用 .bablerc 。
在IDE環境中使用
這里以WebStorm為例， 官網提供了教程 ，但其實JetBrians系列的IDE提供了一個叫做File Wathcer的機制的東西，支持實時修改文件的同時，即可自動對譯出目標的文件，包括js、css等。這里主要介紹一下如何使用File Watcher。
首先，你需要全局安裝babel-cli：
`shell
npm install --global babel-cli
`
其次，在WebStorm（JB家全系IDE通用），打開File -> Settings -> Tools -> File Watcher：
點擊右上角的 + ，會看到如下的界面：
選擇 Babel 項：
這里， File Type ，你可以選擇ECMAScript 6，這樣可以讓你的項目保持對JS文件不進行處理。如下：
對於 Arguments ，你可以進行修改，具體的參數命令，可以參考 Babel Options，比如：
--source-maps --out-file $FileNameWithoutExtension$.js $FilePath$
。
至此，你可以在WebStorm的項目添加一個.es6的文件，每次保存的時候（你按Ctrl + S），他都會自動轉譯出一個.js文件出來。
使用babel-standalone實時轉譯
上面已經介紹過了， babel-standalone 提供了接近於官方Babel同步的版本，並可以在非node.js的環境中使用，而且這個類庫整合了babel大部分的插件。
你可以通過bower進行安裝：
`shell
bower install babel-standalone --save
`
安裝完畢后，直接在你的項目使用即可，他的轉譯參數，和 .babelrc 保持基本的一致。
`javascript
defined(['babel-standalone'], function(babel) { var code = 'let helloWorld = "hello world"; alert(helloWorld)'; var options = { presets: ['es2015'], plugins: ['transform-es2015-modules-amd'] } eval(babel.transforms(code, options)); })