相信很多新手沒有聽說過Babel和ES6，如果你是老手的話，那么請(qǐng)自動(dòng)忽略~
ES6
也就是ECMAScript 6，也就是最新的一代js規(guī)范，添加了很多語言的特性，包括模塊管理，類，塊級(jí)作用域等等內(nèi)容。我最喜歡的就是箭頭函數(shù)，優(yōu)雅~
Babel
然而雖然ES6
很棒，但是現(xiàn)在幾乎沒有瀏覽器或者Node（我記得5.0已經(jīng)全部支持了es6，可是為啥我試著卻不行。。。似乎要開啟全部的harmony）能夠完全支持es6的代碼，那么問題來了，如果我想體驗(yàn)一下es6的代碼，怎么辦？？
一個(gè)很簡(jiǎn)單的思路便是：
我寫個(gè)程序，將es6代碼轉(zhuǎn)換成es5代碼進(jìn)行運(yùn)行不就好了，很棒。而Babel就是干的這個(gè)事情。
babel5 和 babel6 的區(qū)別
對(duì)于Babel來說，現(xiàn)在有了兩個(gè)版本，一個(gè)是5，一個(gè)是6，那么兩者有什么區(qū)別呢？
5對(duì)新手更加友好，因?yàn)橹恍枰惭b一個(gè)babel就可以了，而6需要安裝比較多的東西和插件才可以。相比5來說，6將命令行工具和API分開來了，最直觀的感覺就是，當(dāng)你想在代碼中運(yùn)行es6代碼的話，需要安裝babel-core，而如果你想在終端編譯es6或者是運(yùn)行es6版本的REPL的話，需要安裝babel-cli
也許有人問，原先的babel去哪了？是這樣的，這個(gè)babel的package到了6版本之后雖然還是能安裝，但是已經(jīng)不具有任何的有效的代碼了。取而代之的是一段提示文字，提示你需要安裝babel-core或者babel-cli。所以你在babel6的情況下，完全不需要安裝，babel6將babel插件化，當(dāng)你第一次安裝babel-core并且按照以前的方式來加載require hook的話，你回發(fā)現(xiàn)代碼無法運(yùn)行：require('babel-core/register');
就是因?yàn)閎abel6整體插件化了，如果你想使用es6語法，需要手動(dòng)加載相關(guān)插件。
這里有一篇文章，建議看一下《The Six Things You Need To Know About Babel 6》
Quick Start
建立空文件夾 babel6
建立空文件夾babel6作為本次的目錄，并npm init
安裝Babel6
npm install babel-core --save
如果覺得慢，可以使用淘寶鏡像cnpm
。此時(shí)，基礎(chǔ)的babel6就安裝完成了，如果你想安裝babel5，那么執(zhí)行如下的代碼
npm install babel@5 --save
require hook安裝好之后，問題來了，如何使用呢？
相信使用過coffee的人一定知道register，那么在babel中同樣不例外，也可以使用同樣的方法。
require('babel-core/register');require('./app');
大家可能以為這樣我就可以在app.js
中優(yōu)雅的使用es6了，在babel5中確實(shí)是這樣的，但是在babel6中，缺不一樣了。
如果你這樣寫完，并沒有任何作用，因?yàn)槟闳鄙僖粋€(gè)插件。
安裝插件
如果想使用es6語法，必須安裝一個(gè)插件
npm install babel-preset-es2015
然后在文件夾下面創(chuàng)建一個(gè)叫.babelrc
的文件，并寫入如下代碼：
{ "presets": ["es2015"]}
下面你就可以很優(yōu)雅的書寫你的es6代碼了。(https://dn-cnode.qbox.me/Fjus5qP3SlphDNqUDK5rRGzGcWB-)
書寫優(yōu)雅的ES6代碼
下面我們寫一段優(yōu)雅的代碼
let first = (size, ...args) => [...args].slice(0, size);export default first;console.log(first(2,1,2,3));
Run it
直接運(yùn)行，不說話~~~ (https://dn-cnode.qbox.me/FqXz67mkqdugwFMkG5wSfm-sc_ye)
內(nèi)容解釋
.babelrc
什么是.babelrc文件呢？熟悉linux的同學(xué)一定知道，rc結(jié)尾的文件通常代表運(yùn)行時(shí)自動(dòng)加載的文件，配置等等的，類似bashrc,zshrc。同樣babelrc在這里也是有同樣的作用的，而且在babel6中，這個(gè)文件必不可少。里面可以對(duì)babel命令進(jìn)行配置，以后在使用babel的cli的時(shí)候，可以少寫一些配置，還有一個(gè)env字段，可以對(duì)BABEL_ENV或者NODE_ENV指定的不同的環(huán)境變量，進(jìn)行不同的編譯操作
“presets”
這個(gè)是babel6新加的，就是代表需要啟動(dòng)什么樣的預(yù)設(shè)轉(zhuǎn)碼，在babel6中，預(yù)設(shè)了6種，分別是
es2015
stage-0
stage-1
stage-2
stage-3
react
至于如何安裝，請(qǐng)查看balel官網(wǎng)
而且，對(duì).babelrc的設(shè)置，你可以存放在package.json中的。如下：
{ ... "babel": { "presets": ["es2015"] }, ...}
require hook
require hook 的作用就是替換原先的require，以便在加載自動(dòng)對(duì)代碼進(jìn)行編譯，運(yùn)行。
其實(shí)這個(gè)做的便是重寫require.extensions
中對(duì)應(yīng)的擴(kuò)展名的加載程序，并且默認(rèn)會(huì)判斷這個(gè)文件是否是node_modules
中的模塊，如果是的話，那么將不會(huì)進(jìn)行轉(zhuǎn)換。否則的話，會(huì)進(jìn)行轉(zhuǎn)換。
CLI
其實(shí)babel也可以當(dāng)做全局變量來使用的
npm install babel-cli -g
安裝上后，會(huì)安裝如下四個(gè)程序到全局環(huán)境中：
babel
babel-node
babel-doctor
babel-external-helpers
babel
這個(gè)就是編譯js文件的全局變量，具體如何使用，大家請(qǐng)參照官網(wǎng)。使用方法和coffee，style，less了類似，就不多講了
babel-node
這里主要說一下這個(gè)東西，就是這個(gè)的作用就是提供一個(gè)node
命令相同的REPL環(huán)境，不過這個(gè)環(huán)境會(huì)在執(zhí)行之前講代碼進(jìn)行編譯。
坑1：上文講到，babel6默認(rèn)是無法編譯es6文件的，需要你手動(dòng)安裝es2015
的preset，同樣，全局模式下，也需要這個(gè)preset。
那么問題來了，我們?cè)趺窗惭b這個(gè)preset呢？global？所以這是一個(gè)坑，我在babel的issue中找到這樣的一條。作者給出這樣的回答：我們處理preset和plugin是依據(jù)于輸入的文件，而你直接運(yùn)行CLI是沒有輸入文件的，也就無法定位preset和plugin的位置。言下之意就是不要全局安裝，雖然我們給了你全局安裝的方式。然后作者關(guān)閉了issue，表示很無奈。。。。
所以，如果大家想體驗(yàn)一下es6的REPL的話，建議安裝babel5
npm install babel@5 -g
babel-doctor
就是檢查babel狀況的，主要檢查以下幾個(gè)內(nèi)容
是否發(fā)現(xiàn)了.babelrc
配置文件
是否有重復(fù)的babel安裝包，比如說安裝了5和6
所有的babel安裝包是否已經(jīng)升級(jí)到了最新版
并且 npm >= 3.3.0
babel-external-helpers
就是講一些公共的幫助函數(shù)提取成一個(gè)文件，其實(shí)就做了這一個(gè)作用。。。
