教你如何快速讓瀏覽器兼容ES6特性
寫在正文前，本來這一節的內容應該放在第二節更合適，因為當時就有同學問ES6的兼容性如何，如何在瀏覽器兼容ES6的特性，這節前端君會介紹一個抱磚引玉的操作案例。
為什麽ES6會有兼容性問題？
由於廣大用戶使用的瀏覽器版本在發布的時候也許早於ES6的定稿和發布，而到了今天，我們在編程中如果使用了ES6的新特性，瀏覽器若沒有更新版本，或者新版本中沒有對ES6的特性進行兼容，那麽瀏覽器肯定無法識別我們的ES6代碼，好比瀏覽器根本看不懂我寫的let和const是什麽東西？只能報錯了。這就是瀏覽器對ES6的兼容性問題。
好消息
哪裏有災難，哪裏就有勇士和救兵，針對ES6的兼容性問題，很多團隊為此開發出了多種語法解析轉換工具，把我們寫的ES6語法轉換成ES5，相當於在ES6和瀏覽器之間做了一個翻譯官。比較通用的工具方案有babel，jsx，traceur，es6-shim等。
此外，瀏覽器自身也加快速度兼容ES6的新特性，其中對ES6新特性最友好的是Chrome和Firefox瀏覽器。
各大轉換工具、javascript解析引擎對ES6的支持程度情況，可以參查看這個地址：
‘http://kangax.github.io/compat-table/es6/‘
壞消息
即使瀏覽器對ES6新特性開始漸漸支持，但是這還需要很長一段時間，我們不能百分百依賴瀏覽器本身對ES6的支持度來開發。
雖然出現了各種轉換工具，但是到目前為止，還沒有一款工具能百分百將ES6的新特性完美地轉換成ES5，因為在ES6新增的內容中，存在一些無法在ES5中找到與之匹配的語法，所以不建議在生產環境中使用支持度較低的新特性，後續的教程章節中介紹的新特性前端君也會特意提醒它的兼容性。
學習熱情不減
但是，這並不影響我們學習ES6的熱情，因為ES6是未來的標準，瀏覽器支持只是遲早的事。
本節介紹其中一個轉換工具的安裝和使用情況，安裝使用以簡單為主，主要是讓新手和剛接觸的同學對轉換工具有感性的認知。再次表明，即使使用了轉換工具，我們還是不建議在生產環境大量地使用ES6的特性。
使用轉換工具babel
我們選擇Babel作為學習和講解的工具，以及最多人使用的windows作為操作系統。
接下來的前端君建議你打開電腦，跟著教程一步步操作。（沒有也不要緊，先收藏此文）
步驟1：制作ES6文件
新建一個html文件，取名為：ES6.html，加上含有ES6新特性的代碼，比如：
<script>
const Name = ‘張三‘;//使用新增的關鍵字：const聲明常量
alert(Name);
</script>
步驟2：測試const兼容性
我們在chrome瀏覽器（版本不能太低）運行ES6.html，會正常運行，彈出“張三”。
接下來我們運行在IE 9，會看到這樣的情況：
IE 9瀏覽器會提示我們第9行出現一個語法錯誤，相當於告訴我們它看不懂const是什麽鬼，但是學過ES6入門系列第三節的我們都知道const是ES6的新增關鍵字，用於聲明一個常量。這個時候我們知道const在IE9瀏覽器出現了兼容性問題了。
下面我們開始用Babel來兼容它。
我們可以使用npm來安裝babel，npm是隨同Nodejs一起安裝的包管理工具，新版的nodejs已經繼承了npm，我們只要安裝nodejs即可。對於nodejs的安裝，不在本節的學習範圍，我就不作展開說明了..........才怪。（說好的簡單易懂，前端君怎麽會半途掉鏈子）
步驟3：安裝node
來，沒安裝過的node的同學，我們來一起安裝：
node官網（下載安裝包.msi）：https://nodejs.org/
（nodejs官網首頁截圖）
我們點擊v4.4.5LTS進行下載，下載後找到node-v4.4.5-x64.msi雙擊運行,點擊next（下一步）安裝即可。期間你可以自定義選擇安裝的位置，默認是C:\ProgramFiles\。最後一步點擊 Finish（完成）按鈕退出安裝向導。
步驟4：檢測node是否安裝成功
安裝結束後，我們檢測是否安裝成功：
點擊 “開始”-> “運行”-> 輸入“cmd”-> 進入命令提示符窗口，輸入“node --version”來檢測當前node的版本。
出現：v4.4.5就表示安裝成功，因為我們下載的就是v4.4.5LTS。
步驟5：用npm安裝babel
好了，node安裝好了，也就是它集成的npm包管理工具也安裝好了，接下來，我們利用npm來安裝我們最想要的babel。
同樣我們啟動命令提示符窗口並且輸入：npm install [email protected]，然後回車，這裏要稍等片刻：
看到上面的界面就是表示你安裝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 = ‘張三‘;//使用新增的關鍵字：const聲明常量
alert(Name);
</script>
我們把browser.min.js引入（文件位置的路徑要確保正確）。並且設置第二個script標簽的type為”text/babel”。
步驟7：讓const運行在IE9瀏覽器上
然後我們再在IE9瀏覽器上運行一下：
這個時候IE9能正常運行我們的ES6新特性了，也就是babel轉換起作用了，講const轉換成IE9能執行的代碼了。
這節內容操作教學的比較多，屬於很幹的幹貨，很多東西沒有展開講解，比如：node是什麽？命令提示符怎麽操作等問題，對於剛剛接觸編程的新手來說，如果看不懂或者很多不理解也沒關系，不會阻礙後面章節的學習，因為你可以使用Chrome或者Firefox瀏覽器進行學習和練習，在這兩款瀏覽器上可以執行大部分的ES6新特性，不需要使用類似babel的轉換工具。
這一節的講解只是作為一個學習的入門案例，起到拋磚引玉的作用，讓新手們能對ES6的兼容問題和babel轉換工具有個感性認知，並沒有覆蓋所有兼容方案的介紹，以後的開發中我們一定會發現更多關於ES6特性的坑，也會找到更多相對應的解決辦法。填上這些坑，就是進步的表現。
本節總結
總結：目前，瀏覽器和轉換工具並沒有百分百支持ES6的全部新特性，但並不影響大家對ES6的學習熱情，因為這是未來的行業標準，前端開發者必須掌握的技能；而今天介紹的babel就是目前對 ES6 的支持程度較高，使用廣泛的ES6轉碼器。
教你如何快速讓瀏覽器兼容ES6特性