BabelJS - 將 ES7 特性轉譯為 ES5

本章我們將學習如何將 ES7 特性轉譯為 ES5。

ECMA Script 7 添加了以下新特性：

Async-Await
指數運算子
Array.prototype.includes()

我們將使用 babeljs 將它們編譯為 ES5。根據您的專案需求，也可以將程式碼編譯到任何 Ecma 版本，例如 ES7 到 ES6 或 ES7 到 ES5。由於 ES5 版本最穩定，並且在所有現代和舊瀏覽器上都能正常工作，因此我們將程式碼編譯為 ES5。

Async-Await

Async 是一個非同步函式，它返回一個隱式 Promise。該 Promise 或者被 resolve，或者被 reject。Async 函式與普通的標準函式相同。該函式可以包含 await 表示式，該表示式會暫停執行，直到它返回一個 Promise，一旦獲得 Promise，執行就會繼續。只有當函式為 async 時，await 才能工作。

這是一個關於 async 和 await 的工作示例。

示例

let timer = () => {
   return new Promise(resolve => {
      setTimeout(() => {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
let out = async () => {
   let msg = await timer();
   console.log(msg);
   console.log("hello after await");
};
out();

輸出

Promise resolved after 5 seconds
hello after await

在呼叫 timer 函式之前添加了 await 表示式。timer 函式將在 5 秒後返回 Promise。因此，await 將暫停執行，直到 timer 函式上的 Promise 被 resolve 或 reject，然後繼續執行。

現在讓我們使用 babel 將上述程式碼轉譯為 ES5。

ES7 - Async-Await

let timer = () => {
   return new Promise(resolve => {
      setTimeout(() => {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
let out = async () => {
   let msg = await timer();
   console.log(msg);
   console.log("hello after await");
};
out();

命令

npx babel asyncawait.js --out-file asyncawait_es5.js

BabelJS - ES5

"use strict";

var timer = function timer() {
   return new Promise(function (resolve) {
      setTimeout(function () {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
var out = async function out() {
   var msg = await timer();
   console.log(msg);
   console.log("hello after await");
};

out();

Babeljs 不會編譯物件或方法；因此，此處使用的 Promise 不會被轉譯，並將原樣顯示。為了在舊版瀏覽器上支援 Promise，我們需要新增支援 Promise 的程式碼。目前，讓我們安裝 babel-polyfill，如下所示：

npm install --save babel-polyfill

它應該儲存為依賴項，而不是開發依賴項。

要在瀏覽器中執行程式碼，我們將使用 node_modules\babel-polyfill\dist\polyfill.min.js 中的 polyfill 檔案，並使用 script 標籤呼叫它，如下所示：

<!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="aynscawait_es5.js"></script>
   </body>
</html>

當您執行上述測試頁面時，您將在控制檯中看到如下所示的輸出

指數運算子

** 是 ES7 中用於指數運算的運算子。以下示例展示了 ES7 中指數運算子的工作方式，以及使用 babeljs 轉譯的程式碼。

示例

let sqr = 9 ** 2;
console.log(sqr);

輸出

ES6 - 指數運算

let sqr = 9 ** 2;
console.log(sqr);

要轉譯指數運算子，我們需要安裝如下所示的外掛：

命令

npm install --save-dev babel-plugin-transform-exponentiation-operator

將外掛詳細資訊新增到 **.babelrc** 檔案中，如下所示：

{
   "presets":[
      "es2015"
   ],
   "plugins": ["transform-exponentiation-operator"]
}

命令

npx babel exponeniation.js --out-file exponeniation_es5.js

BabelJS - ES5

"use strict";

var sqr = Math.pow(9, 2);
console.log(sqr);

Array.prototype.includes()

如果傳遞給它的元素存在於陣列中，則此特性返回 true，否則返回 false。

示例

let arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
let names = ['Siya', 'Tom', 'Jerry', 'Bean', 'Ben'];
console.log(names.includes('Tom'));
console.log(names.includes('Be'));

輸出

true
true
false

我們在這裡必須再次使用 babel-polyfill，因為 **includes** 是陣列上的一個方法，它不會被轉譯。我們需要額外的步驟來包含 polyfill 以使其在舊版瀏覽器中工作。

ES6 - array.includes

let arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
let names = ['Siya', 'Tom', 'Jerry', 'Bean', 'Ben'];
console.log(names.includes('Tom'));
console.log(names.includes('Be'));

命令

npx babel array_include.js --out-file array_include_es5.js

Babel-ES5

'use strict';

var arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
var names = ['Siya', 'Tom', 'Jerry', 'Bean', 'Ben'];
console.log(names.includes('Tom'));
console.log(names.includes('Be'));

要在舊版瀏覽器中測試它，我們需要使用 polyfill，如下所示：

<!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="array_include_es5.js"></script>
   </body>
</html>

輸出

列印頁面