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