寫在正文前，本來(lái)這一節(jié)的內(nèi)容應(yīng)該放在第二節(jié)更合適，因?yàn)楫?dāng)時(shí)就有同學(xué)問(wèn)ES6的兼容性如何，如何在瀏覽器兼容ES6的特性，這節(jié)會(huì)介紹一個(gè)抱磚引玉的操作案例。
為什么ES6會(huì)有兼容性問(wèn)題？
由于廣大用戶使用的瀏覽器版本在發(fā)布的時(shí)候也許早于ES6的定稿和發(fā)布，而到了今天，我們?cè)诰幊讨腥绻褂昧薊S6的新特性，瀏覽器若沒有更新版本，或者新版本中沒有對(duì)ES6的特性進(jìn)行兼容，那么瀏覽器肯定無(wú)法識(shí)別我們的ES6代碼，好比瀏覽器根本看不懂我寫的let和const是什么東西？只能報(bào)錯(cuò)了。這就是瀏覽器對(duì)ES6的兼容性問(wèn)題。
好消息
哪里有災(zāi)難，哪里就有勇士和救兵，針對(duì)ES6的兼容性問(wèn)題，很多團(tuán)隊(duì)為此開發(fā)出了多種語(yǔ)法解析轉(zhuǎn)換工具，把我們寫的ES6語(yǔ)法轉(zhuǎn)換成ES5，相當(dāng)于在ES6和瀏覽器之間做了一個(gè)翻譯官。比較通用的工具方案有babel，jsx，traceur，es6-shim等。
此外，瀏覽器自身也加快速度兼容ES6的新特性，其中對(duì)ES6新特性最友好的是Chrome和Firefox瀏覽器。
各大轉(zhuǎn)換工具、javascript解析引擎對(duì)ES6的支持程度情況，可以參查看這個(gè)地址：
'http://kangax.github.io/compat-table/es6/'
壞消息
即使瀏覽器對(duì)ES6新特性開始漸漸支持，但是這還需要很長(zhǎng)一段時(shí)間，我們不能百分百依賴瀏覽器本身對(duì)ES6的支持度來(lái)開發(fā)。
雖然出現(xiàn)了各種轉(zhuǎn)換工具，但是到目前為止，還沒有一款工具能百分百將ES6的新特性完美地轉(zhuǎn)換成ES5，因?yàn)樵贓S6新增的內(nèi)容中，存在一些無(wú)法在ES5中找到與之匹配的語(yǔ)法，所以不建議在生產(chǎn)環(huán)境中使用支持度較低的新特性，后續(xù)的教程章節(jié)中介紹的新特性前端君也會(huì)特意提醒它的兼容性。
學(xué)習(xí)熱情不減
但是，這并不影響我們學(xué)習(xí)ES6的熱情，因?yàn)镋S6是未來(lái)的標(biāo)準(zhǔn)，瀏覽器支持只是遲早的事。
本節(jié)介紹其中一個(gè)轉(zhuǎn)換工具的安裝和使用情況，安裝使用以簡(jiǎn)單為主，主要是讓新手和剛接觸的同學(xué)對(duì)轉(zhuǎn)換工具有感性的認(rèn)知。再次表明，即使使用了轉(zhuǎn)換工具，我們還是不建議在生產(chǎn)環(huán)境大量地使用ES6的特性。
使用轉(zhuǎn)換工具babel
我們選擇Babel作為學(xué)習(xí)和講解的工具，以及最多人使用的windows作為操作系統(tǒng)。
接下來(lái)的前端君建議你打開電腦，跟著教程一步步操作。（沒有也不要緊，先收藏此文）
步驟1：制作ES6文件
新建一個(gè)html文件，取名為：ES6.html，加上含有ES6新特性的代碼，比如：
const Name = '張三';//使用新增的關(guān)鍵字：const聲明常量 alert(Name)
步驟2：測(cè)試const兼容性
我們?cè)赾hrome瀏覽器（版本不能太低）運(yùn)行ES6.html，會(huì)正常運(yùn)行，彈出“張三”。
接下來(lái)我們運(yùn)行在IE 9，會(huì)看到這樣的情況：
IE 9瀏覽器會(huì)提示我們第9行出現(xiàn)一個(gè)語(yǔ)法錯(cuò)誤，相當(dāng)于告訴我們它看不懂const是什么鬼，但是學(xué)過(guò)ES6入門系列第三節(jié)的我們都知道const是ES6的新增關(guān)鍵字，用于聲明一個(gè)常量。這個(gè)時(shí)候我們知道const在IE9瀏覽器出現(xiàn)了兼容性問(wèn)題了。
下面我們開始用Babel來(lái)兼容它。
我們可以使用npm來(lái)安裝babel，npm是隨同Nodejs一起安裝的包管理工具，新版的nodejs已經(jīng)繼承了npm，我們只要安裝nodejs即可。對(duì)于nodejs的安裝，不在本節(jié)的學(xué)習(xí)范圍，我就不作展開說(shuō)明了..........才怪。（說(shuō)好的簡(jiǎn)單易懂，前端君怎么會(huì)半途掉鏈子）
步驟3：安裝node
來(lái)，沒安裝過(guò)的node的同學(xué)，我們來(lái)一起安裝：
node官網(wǎng)（下載安裝包.msi）：https://nodejs.org/
（nodejs官網(wǎng)首頁(yè)截圖）
我們點(diǎn)擊v4.4.5LTS進(jìn)行下載，下載后找到node-v4.4.5-x64.msi雙擊運(yùn)行,點(diǎn)擊next（下一步）安裝即可。期間你可以自定義選擇安裝的位置，默認(rèn)是C:\ProgramFiles\。最后一步點(diǎn)擊 Finish（完成）按鈕退出安裝向?qū)А?/p>
步驟4：檢測(cè)node是否安裝成功
安裝結(jié)束后，我們檢測(cè)是否安裝成功：
點(diǎn)擊 “開始”-> “運(yùn)行”-> 輸入“cmd”-> 進(jìn)入命令提示符窗口，輸入“node --version”來(lái)檢測(cè)當(dāng)前node的版本。
出現(xiàn)：v4.4.5就表示安裝成功，因?yàn)槲覀兿螺d的就是v4.4.5LTS。
步驟5：用npm安裝babel
好了，node安裝好了，也就是它集成的npm包管理工具也安裝好了，接下來(lái)，我們利用npm來(lái)安裝我們最想要的babel。
同樣我們啟動(dòng)命令提示符窗口并且輸入：npm install babel-core@5，然后回車，這里要稍等片刻：
在這個(gè)目錄里面我們找到babel的瀏覽器版本browser.js(未壓縮版)和browser.min.js(壓縮版)。
步驟6：使用babel
然后我們將這個(gè)文件使用在我們的ES6.html中。
const Name = '張三';//使用新增的關(guān)鍵字：const聲明常量 alert(Name);
我們把browser.min.js引入（文件位置的路徑要確保正確）。并且設(shè)置第二個(gè)script標(biāo)簽的type為”text/babel”。
步驟7：讓const運(yùn)行在IE9瀏覽器上
然后我們?cè)僭贗E9瀏覽器上運(yùn)行一下：
這個(gè)時(shí)候IE9能正常運(yùn)行我們的ES6新特性了，也就是babel轉(zhuǎn)換起作用了，講const轉(zhuǎn)換成IE9能執(zhí)行的代碼了。
這節(jié)內(nèi)容操作教學(xué)的比較多，屬于很干的干貨，很多東西沒有展開講解，比如：node是什么？命令提示符怎么操作等問(wèn)題，對(duì)于剛剛接觸編程的新手來(lái)說(shuō)，如果看不懂或者很多不理解也沒關(guān)系，不會(huì)阻礙后面章節(jié)的學(xué)習(xí)，因?yàn)槟憧梢允褂肅hrome或者Firefox瀏覽器進(jìn)行學(xué)習(xí)和練習(xí)，在這兩款瀏覽器上可以執(zhí)行大部分的ES6新特性，不需要使用類似babel的轉(zhuǎn)換工具。
這一節(jié)的講解只是作為一個(gè)學(xué)習(xí)的入門案例，起到拋磚引玉的作用，讓新手們能對(duì)ES6的兼容問(wèn)題和babel轉(zhuǎn)換工具有個(gè)感性認(rèn)知，并沒有覆蓋所有兼容方案的介紹，以后的開發(fā)中我們一定會(huì)發(fā)現(xiàn)更多關(guān)于ES6特性的坑，也會(huì)找到更多相對(duì)應(yīng)的解決辦法。填上這些坑，就是進(jìn)步的表現(xiàn)。
本節(jié)總結(jié)
總結(jié)：目前，瀏覽器和轉(zhuǎn)換工具并沒有百分百支持ES6的全部新特性，但并不影響大家對(duì)ES6的學(xué)習(xí)熱情，因?yàn)檫@是未來(lái)的行業(yè)標(biāo)準(zhǔn)，前端開發(fā)者必須掌握的技能；而今天介紹的babel就是目前對(duì) ES6 的支持程度較高，使用廣泛的ES6轉(zhuǎn)碼器。
ES6這一系列我一直再出,循序漸進(jìn).喜歡這篇文章的可以看看我的其他這一系列文章.
更多前端學(xué)習(xí)內(nèi)容文章干貨請(qǐng)關(guān)注我的專欄(不斷更新)
阿里名廠標(biāo)準(zhǔn)web前端高級(jí)工程師教程目錄大全,從基礎(chǔ)到進(jìn)階,看完保證您的薪資上升一個(gè)臺(tái)階
在這里我給大家準(zhǔn)備了很多的學(xué)習(xí)資料
