解決老瀏覽器不支援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轉碼器。
轉載地址：http://www.rockyxia.com/?p=669為什麼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轉碼器。