BabelJS - Transpile ES7 tính năng cho ES5

Trong chương này, chúng ta sẽ học cách chuyển các tính năng của ES7 sang ES5.

ECMA Script 7 có thêm các tính năng mới sau:

Async-Await
Toán tử lũy thừa
Array.prototype.includes()

Chúng tôi sẽ biên dịch chúng sang ES5 bằng cách sử dụng babeljs. Tùy thuộc vào yêu cầu dự án của bạn, cũng có thể biên dịch mã trong bất kỳ phiên bản ecma nào, chẳng hạn như ES7 sang ES6 hoặc ES7 sang ES5. Vì phiên bản ES5 là phiên bản ổn định nhất và hoạt động tốt trên tất cả các trình duyệt hiện đại và cũ, chúng tôi sẽ biên dịch mã thành ES5.

Async-Await

Async là một hàm không đồng bộ, trả về một lời hứa ngầm định. Lời hứa hoặc được giải quyết hoặc bị từ chối. Hàm async giống như một hàm tiêu chuẩn thông thường. Hàm có thể có biểu thức chờ đợi tạm dừng việc thực thi cho đến khi nó trả về một lời hứa và khi nó nhận được nó, việc thực thi sẽ tiếp tục. Await sẽ chỉ hoạt động nếu hàm không đồng bộ.

Đây là một ví dụ làm việc về async và await.

Thí dụ

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();

Đầu ra

Promise resolved after 5 seconds
hello after await

Biểu thức await được thêm vào trước khi hàm hẹn giờ được gọi. Chức năng hẹn giờ sẽ trả lại lời hứa sau 5 giây. Vì vậy, await sẽ tạm dừng quá trình thực thi cho đến khi giải quyết hoặc từ chối chức năng hẹn giờ hứa hẹn và sau đó tiếp tục.

Bây giờ chúng ta hãy chuyển mã trên sang ES5 bằng cách sử dụng babel.

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();

chỉ huy

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 không biên dịch đối tượng hoặc phương thức; vì vậy ở đây các lời hứa được sử dụng sẽ không được chuyển đổi và sẽ được hiển thị như nó vốn có. Để hỗ trợ các hứa hẹn trên các trình duyệt cũ, chúng ta cần thêm mã, mã này sẽ có hỗ trợ cho các lời hứa. Bây giờ, chúng ta hãy cài đặt babel-polyfill như sau:

npm install --save babel-polyfill

Nó nên được lưu dưới dạng phụ thuộc và không phụ thuộc vào nhà phát triển.

Để chạy mã trong trình duyệt, chúng tôi sẽ sử dụng tệp polyfill từ node_modules \ babel-polyfill \ dist \ polyfill.min.js và gọi nó bằng thẻ script như hình dưới đây -

<!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>

Khi chạy trang kiểm tra trên, bạn sẽ thấy đầu ra trong bảng điều khiển như hình dưới đây

Toán tử lũy thừa

** là toán tử được sử dụng để tính lũy thừa trong ES7. Ví dụ sau đây cho thấy hoạt động tương tự trong ES7 và mã được chuyển đổi bằng cách sử dụng babeljs.

Thí dụ

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

Đầu ra

ES6 - Luỹ thừa

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

Để xử lý toán tử lũy thừa, chúng ta cần cài đặt một plugin sẽ được cài đặt như sau:

chỉ huy

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

Thêm chi tiết plugin vào .babelrc tập tin như sau -

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

chỉ huy

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 ()

Tính năng này cho giá trị true nếu phần tử được truyền đến nó có trong mảng và false nếu ngược lại.

Thí dụ

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'));

Đầu ra

true
true
false

Chúng ta phải sử dụng lại babel-polyfill ở đây như includeslà một phương thức trên một mảng và nó sẽ không được chuyển. Chúng tôi cần thêm một bước để bao gồm polyfill để làm cho nó hoạt động trong các trình duyệt cũ hơn.

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'));

chỉ huy

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'));

Để kiểm tra nó trong trình duyệt cũ hơn, chúng ta cần sử dụng polyfill như hình dưới đây -

<!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>

Đầu ra