相信很多新手沒有聽說過Babel和ES6涕滋，如果你是老手的話剪菱，那么請自動忽略~
ES6
也就是ECMAScript 6栖茉，也就是最新的一代js規(guī)范罪裹，添加了很多語言的特性饱普，包括模塊管理，類状共，塊級作用域等等內(nèi)容套耕。我最喜歡的就是箭頭函數(shù)，優(yōu)雅~
Babel
然而雖然ES6
很棒峡继，但是現(xiàn)在幾乎沒有瀏覽器或者Node（我記得5.0已經(jīng)全部支持了es6冯袍，可是為啥我試著卻不行。碾牌。康愤。似乎要開啟全部的harmony）能夠完全支持es6的代碼，那么問題來了小染，如果我想體驗一下es6的代碼翘瓮，怎么辦？裤翩？
一個很簡單的思路便是：
我寫個程序，將es6代碼轉(zhuǎn)換成es5代碼進行運行不就好了调榄，很棒踊赠。而Babel就是干的這個事情。
babel5 和 babel6 的區(qū)別
對于Babel來說每庆，現(xiàn)在有了兩個版本筐带，一個是5，一個是6缤灵，那么兩者有什么區(qū)別呢伦籍？
5對新手更加友好，因為只需要安裝一個babel就可以了腮出，而6需要安裝比較多的東西和插件才可以帖鸦。相比5來說，6將命令行工具和API分開來了胚嘲，最直觀的感覺就是作儿，當(dāng)你想在代碼中運行es6代碼的話，需要安裝babel-core馋劈，而如果你想在終端編譯es6或者是運行es6版本的REPL的話攻锰，需要安裝babel-cli
也許有人問晾嘶，原先的babel去哪了？是這樣的娶吞，這個babel的package到了6版本之后雖然還是能安裝垒迂，但是已經(jīng)不具有任何的有效的代碼了。取而代之的是一段提示文字妒蛇，提示你需要安裝babel-core或者babel-cli机断。所以你在babel6的情況下，完全不需要安裝材部，babel6將babel插件化毫缆，當(dāng)你第一次安裝babel-core并且按照以前的方式來加載require hook的話，你回發(fā)現(xiàn)代碼無法運行：require('babel-core/register');
就是因為babel6整體插件化了乐导，如果你想使用es6語法苦丁，需要手動加載相關(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
棵磷。此時蛾狗，基礎(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中確實是這樣的求冷，但是在babel6中，缺不一樣了窍霞。
如果你這樣寫完匠题，并沒有任何作用，因為你缺少一個插件官撼。
安裝插件
如果想使用es6語法梧躺，必須安裝一個插件
npm install babel-preset-es2015
然后在文件夾下面創(chuàng)建一個叫.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
直接運行掠哥，不說話~~~ (https://dn-cnode.qbox.me/FqXz67mkqdugwFMkG5wSfm-sc_ye)
內(nèi)容解釋
.babelrc
什么是.babelrc文件呢巩踏？熟悉linux的同學(xué)一定知道，rc結(jié)尾的文件通常代表運行時自動加載的文件续搀，配置等等的塞琼，類似bashrc,zshrc。同樣babelrc在這里也是有同樣的作用的禁舷，而且在babel6中彪杉，這個文件必不可少。里面可以對babel命令進行配置牵咙，以后在使用babel的cli的時候派近，可以少寫一些配置，還有一個env字段洁桌，可以對BABEL_ENV或者NODE_ENV指定的不同的環(huán)境變量渴丸，進行不同的編譯操作
“presets”
這個是babel6新加的，就是代表需要啟動什么樣的預(yù)設(shè)轉(zhuǎn)碼另凌，在babel6中谱轨，預(yù)設(shè)了6種，分別是
es2015
stage-0
stage-1
stage-2
stage-3
react
至于如何安裝吠谢，請查看balel官網(wǎng)
而且土童，對.babelrc的設(shè)置，你可以存放在package.json中的工坊。如下：
{ ... "babel": { "presets": ["es2015"] }, ...}
require hook
require hook 的作用就是替換原先的require献汗，以便在加載自動對代碼進行編譯，運行王污。
其實這個做的便是重寫require.extensions
中對應(yīng)的擴展名的加載程序雀瓢，并且默認會判斷這個文件是否是node_modules
中的模塊，如果是的話玉掸，那么將不會進行轉(zhuǎn)換。否則的話醒叁，會進行轉(zhuǎn)換司浪。
CLI
其實babel也可以當(dāng)做全局變量來使用的
npm install babel-cli -g
安裝上后，會安裝如下四個程序到全局環(huán)境中：
babel
babel-node
babel-doctor
babel-external-helpers
babel
這個就是編譯js文件的全局變量把沼，具體如何使用啊易，大家請參照官網(wǎng)。使用方法和coffee饮睬，style租谈，less了類似，就不多講了
babel-node
這里主要說一下這個東西，就是這個的作用就是提供一個node
命令相同的REPL環(huán)境割去，不過這個環(huán)境會在執(zhí)行之前講代碼進行編譯窟却。
坑1：上文講到，babel6默認是無法編譯es6文件的呻逆，需要你手動安裝es2015
的preset夸赫，同樣，全局模式下咖城，也需要這個preset茬腿。
那么問題來了，我們怎么安裝這個preset呢宜雀？global切平？所以這是一個坑，我在babel的issue中找到這樣的一條辐董。作者給出這樣的回答：我們處理preset和plugin是依據(jù)于輸入的文件悴品，而你直接運行CLI是沒有輸入文件的，也就無法定位preset和plugin的位置郎哭。言下之意就是不要全局安裝他匪，雖然我們給了你全局安裝的方式。然后作者關(guān)閉了issue夸研，表示很無奈邦蜜。。亥至。悼沈。
所以，如果大家想體驗一下es6的REPL的話姐扮，建議安裝babel5
npm install babel@5 -g
babel-doctor
就是檢查babel狀況的絮供，主要檢查以下幾個內(nèi)容
是否發(fā)現(xiàn)了.babelrc
配置文件
是否有重復(fù)的babel安裝包，比如說安裝了5和6
所有的babel安裝包是否已經(jīng)升級到了最新版
并且 npm >= 3.3.0
babel-external-helpers
就是講一些公共的幫助函數(shù)提取成一個文件茶敏，其實就做了這一個作用壤靶。。惊搏。
