推薦閱讀 Babel教程
以下是2018年1月的舊文
----------------------------------------------------------------
很多同學搞不清楚babel與polyfill的關系以及區別，這兒給大家細致解惑。
Babel:Babel 是一個廣泛使用的 ES6 轉碼器，可以將 ES6 代碼轉為 ES5 代碼。注意：Babel 默認只轉換新的 JavaScript 句法（syntax），而不轉換新的 API。有的同學可能分不清哪些是ES6句法，哪些是API，這個暫時先放一放，后面會講。
Polyfill:Polyfill的准確意思為，用於實現瀏覽器並不支持的原生API的代碼。
下面用一個例子來講：
//使用babel轉碼前的代碼 require('babel-polyfill'); (x => x * 2)(1); var b = Array.of(1,2,4);
//使用babel轉碼后的代碼 'use strict'; require('babel-polyfill'); (function (x) { return x * 2; })(1); var b = Array.of(1, 2, 4);
這個例子中，Babel轉換了ES6的箭頭函數句法，但對於Array.of並沒有轉換，因為Array.of是ES6的API。有些同學可能還是不清楚哪些是句法，哪些是API，這個不要緊，我是新人的時候也是花了很長時間才理解的，需要多寫代碼慢慢體會，潛移默化。對於什么是API，講一個例子幫助大家理解吧。
if (!Array.of) { Array.of = function() { return Array.prototype.slice.call(arguments); };
我們都知道Array是ES5就存在的一個對象了，但是該對象沒有of方法，這個方法就是一個API，但ES6有這個API了。對於不支持ES6的瀏覽器，我們通過引入babel-polyfill使其支持ES6的API，類似於上面的代碼來實現的。
下面再給一個現實的例子：
我在舊版瀏覽器（火狐23.0，2013年發布的）打開下面的頁面直接報錯（新版的Chrome和火狐不會報錯，這兩個已經支持ES6）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- <script type="text/javascript" src="polyfill.js"></script> --> <script type="text/javascript"> var b = Array.of(1, 2, 4); console.log(b) </script> </body> </html>
當把Babel官網提供的polyfill.js（就是babel-polyfill）引入后，即反注釋上面代碼中已經注釋掉的polyfill.js，就可以正常運行了。
另外，還有些同學要問，require()怎么轉換成ES5啊？其實，瀏覽器里這個通過Babel是不能轉換的，要通過webpack等打包工具把代碼打包用。