BabelJS - Babel Polyfill

Babel Polyfill 為 Web 瀏覽器添加了對尚不可用功能的支援。Babel 將程式碼從最新的 Ecma 版本編譯到我們想要的版本。它根據預設更改語法，但無法對使用的物件或方法做任何事情。對於這些功能，我們必須使用 polyfill 來實現向後相容性。

可以 polyfill 的功能

以下是舊版瀏覽器中使用時需要 polyfill 支援的功能列表：

Promise
Map
Set
Symbol
Weakmap
Weakset
Array.from、Array.includes、Array.of、Array#find、Array.buffer、Array#findIndex
Object.assign、Object.entries、Object.values

我們將建立專案設定，並瞭解 babel polyfill 的工作原理。

命令

npm init

現在我們將安裝 babel 所需的包。

Babel 6 的包

npm install babel-cli babel-core babel-preset-es2015 --save-dev

Babel 7 的包

npm install @babel/cli @babel/core @babel/preset-env --save-dev

這是最終的 package.json：

我們還將 es2015 新增到預設中，因為我們希望將程式碼編譯為 es5。

.babelrc for babel 6

.babelrc for babel 7

{
   "presets":["@babel/env"]
}

我們將安裝 lite-serve，以便我們可以在瀏覽器中測試程式碼：

npm install --save-dev lite-server

讓我們在 package.json 中新增 babel 命令來編譯我們的程式碼：

我們還添加了 build 命令，它呼叫 lite-server。

Babel-polyfill 與 babel-core 包一起安裝。babel-polyfill 將在 node_modules 中可用，如下所示：

我們將進一步處理 Promise，並與之一起使用 babel-polyfill。

ES6 - Promise

let timingpromise = new Promise((resolve, reject) => {
   setTimeout(function() {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then((msg) => {
   console.log("%c"+msg, "font-size:25px;color:red;");
});

命令

npx babel promise.js --out-file promise_es5.js

BabelJS - ES5

"use strict";

var timingpromise = new Promise(function (resolve, reject) {
   setTimeout(function () {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then(function (msg) {
   console.log("%c"+msg, "font-size:25px;color:red;");
});

編譯不需要更改任何內容。Promise 的程式碼已按原樣轉換。但是，不支援 Promise 的瀏覽器即使我們將程式碼編譯為 es5 也會丟擲錯誤。

為了解決此問題，我們需要在最終的 es5 編譯程式碼中新增 polyfill。要在瀏覽器中執行程式碼，我們將從 node_modules 中獲取 babel-polyfill 檔案，並將其新增到我們想要使用 Promise 的 .html 檔案中，如下所示：

index.html

<html>
   <head>
   </head>
   <body>
      <h1>Babel Polyfill Testing</h1>
      <script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
      <script type="text/javascript" src="promise_es5.js"></script>
   </body>
</html>

輸出

在 index.html 檔案中，我們使用了來自 **node_modules** 的 polyfill.min.js 檔案，然後是 promise_es5.js：

<script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>

<script type="text/javascript" src="promise_es5.js"></script>

**注意** - polyfill 檔案必須在主 JavaScript 呼叫之前使用。

字串填充

字串填充根據指定的長度從左側新增另一個字串。字串填充的語法如下所示：

語法

str.padStart(length, string);
str.padEnd(length, string);

示例

const str = 'abc';

console.log(str.padStart(8, '_'));
console.log(str.padEnd(8, '_'));

輸出

_____abc
abc_____

Babel - ES5

npx babel strpad.js --out-file strpad_es5.js

命令

'use strict';

var str = 'abc';

console.log(str.padStart(8, '_'));
console.log(str.padEnd(8, '_'));

js 必須與 babel-polyfill 一起使用，如下所示：

test.html

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing </title>
   </head>
   <body>
      <script src="node_modules/babel-polyfill/dist/polyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="strpad_es5.js"></script>
   </body>
</html>

Map、Set、WeakSet、WeakMap

在本節中，我們將學習 **Map、Set、WeakSet、WeakMap**。

**Map** 是一個帶有鍵/值對的物件。
**Set** 也是一個物件，但具有唯一的值。
**WeakMap 和 WeakSet** 也是帶有鍵/值對的物件。

Map、Set、WeakMap 和 WeakSet 是新增到 ES6 的新功能。為了將其轉換為在舊版瀏覽器中使用，我們需要使用 polyfill。我們將研究一個示例，並使用 polyfill 來編譯程式碼。

示例

let m = new Map(); //map example
m.set("0","A");
m.set("1","B");
console.log(m);

let set = new Set(); //set example
set.add('A');
set.add('B');
set.add('A');
set.add('B');
console.log(set);

let ws = new WeakSet(); //weakset example
let x = {};
let y = {};
ws.add(x);
console.log(ws.has(x));
console.log(ws.has(y));

let wm = new WeakMap(); //weakmap example
let a = {};
wm.set(a, "hello");
console.log(wm.get(a));

輸出

Map(2) {"0" => "A", "1" => "B"}
Set(2) {"A", "B"}
true
false
hello

命令

npx babel set.js --out-file set_es5.js

Babel-ES5

"use strict";

var m = new Map(); //map example
m.set("0", "A");
m.set("1", "B");
console.log(m);

var set = new Set(); //set example
set.add('A');
set.add('B');
set.add('A');
set.add('B');
console.log(set);

var ws = new WeakSet(); //weakset example
var x = {};
var y = {};
ws.add(x);
console.log(ws.has(x));
console.log(ws.has(y));

var wm = new WeakMap(); //weakmap example
var a = {};
wm.set(a, "hello");
console.log(wm.get(a));

js 必須與 babel-polyfill 一起使用，如下所示：

test.html

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script src="node_modules/babel-polyfill/dist/polyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="set_es5.js"></script>
   </body>
</html>

輸出

陣列方法

許多屬性和方法都可以在陣列上使用；例如，array.from、array.includes 等。

讓我們考慮研究以下示例以更好地理解這一點。

示例

arraymethods.js

var arrNum = [1, 2, 3];

console.log(arrNum.includes(2));
console.log(Array.from([3, 4, 5], x => x + x));

輸出

true
[6, 8, 10]

命令

npx babel arraymethods.js --out-file arraymethods_es5.js

Babel-es5

"use strict";

var arrNum = [1, 2, 3];

console.log(arrNum.includes(2));
console.log(Array.from([3, 4, 5], function (x) {
return x + x;
}));

在陣列上使用的方法按原樣列印。為了使它們在舊版瀏覽器上工作，我們需要在開頭新增 polyfill 檔案，如下所示：

index.html

<html>
   <head></head>
   <body>
      <h1>Babel Polyfill Testing</h1>
      <script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
      <script type="text/javascript" src="arraymethods_es5.js"></script>
   </body>
</html>

輸出

列印頁面