前面的文章說(shuō)到了react 15的一些特性，眾所周知react搭配es6或者叫es2015的開(kāi)發(fā)模式更加的方便快捷。不過(guò)提到es2015這個(gè)畢竟沒(méi)有被瀏覽器廣泛支持的規(guī)范，要想能夠快快樂(lè)樂(lè)的應(yīng)用起來(lái)，就少不了將未來(lái)將要被瀏覽器支持但現(xiàn)在支持還不全面的規(guī)范轉(zhuǎn)換成現(xiàn)有規(guī)范的工具了。這個(gè)好像選擇不多，是的好像就是babel了，關(guān)于babel，本文不會(huì)去涉及它內(nèi)部的實(shí)現(xiàn)原理。因?yàn)樽罱诩嫒菪碌膔eact的時(shí)候，不可避免的涉及到babel的更新，開(kāi)始被那一串配置搞的頭大，所以就認(rèn)真的學(xué)習(xí)了一下，來(lái)跟大家分享一下。這里的主要目的是babel的一些列配置文件的處理，所以關(guān)于babel的安裝之類(lèi)的請(qǐng)猛戳babel官網(wǎng)。

關(guān)于babel的配置，主要是體現(xiàn)在項(xiàng)目根目錄下的.babelrc文件中。在babel6之前的版本還支持其他的一些配置選項(xiàng)，更新之后babel配置文件只支持presets，plugins兩個(gè)參數(shù)。不向后兼容，所以其他的參數(shù)是會(huì)報(bào)類(lèi)似下面的錯(cuò)誤：

ReferenceError: [BABEL] XXXX.jsx: Unknown option: stage(或loose)。

所以我們所有的配置都是基于上面兩個(gè)參數(shù)上來(lái)配置的。兩者差別可以認(rèn)為presets指定的部分是babel集成好的插件集，可以用來(lái)應(yīng)對(duì)某一類(lèi)問(wèn)題例如es2015就是用來(lái)解析es2015用到的插件集。當(dāng)然可能會(huì)有某些情況是比較個(gè)例的，可能用到但大部分情況下不會(huì)出現(xiàn)的插件，你就可以在plugins中配置

一、presets：babel已經(jīng)集成好的插件集。包括以下六種：

1）es2015: 處理es2015基本的語(yǔ)法，安裝對(duì)應(yīng)語(yǔ)句：

npm install npm install --save-dev babel-preset-es2015

2）react：主要用來(lái)處理react所用到的jsx語(yǔ)法等。安裝：

npm install npm install --save-dev babel-preset-react 

3）stage-0:主要處理do語(yǔ)句和bind方法。還包括stage-1,stage-2,stage-3的全部插件。