Babel與Polyfill的關係和區別

時間 2019-11-08

標籤 babel polyfill 關係區別简体版

原文原文鏈接

　　不少同窗搞不清楚babel與polyfill的關係以及區別，這兒給你們細緻解惑。javascript

　　Babel:Babel 是一個普遍使用的 ES6 轉碼器，能夠將 ES6 代碼轉爲 ES5 代碼。注意：Babel 默認只轉換新的 JavaScript 句法（syntax），而不轉換新的 API。有的同窗可能分不清哪些是ES6句法，哪些是API，這個暫時先放一放，後面會講。html

　　Polyfill:Polyfill的準確意思爲，用於實現瀏覽器並不支持的原生API的代碼。java

　　下面用一個例子來說：webpack

//使用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，講一個例子幫助你們理解吧。web

if (!Array.of) { 
Array.of = function() { 
return Array.prototype.slice.call(arguments); 
};

　　咱們都知道Array是ES5就存在的一個對象了，可是該對象沒有of方法，這個方法就是一個API，但ES6有這個API了。對於不支持ES6的瀏覽器，咱們經過引入babel-polyfill使其支持ES6的API，相似於上面的代碼來實現的。瀏覽器

　　下面再給一個現實的例子：babel

　　我在舊版瀏覽器（火狐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>