BabelJS - คุณสมบัติ Transpile ES7 เป็น ES5

ในบทนี้เราจะเรียนรู้วิธีการถ่ายทอดคุณสมบัติ ES7 ไปยัง ES5

ECMA Script 7 มีคุณสมบัติใหม่ที่เพิ่มเข้ามาดังต่อไปนี้ -

Async-Await
ตัวดำเนินการยกกำลัง
Array.prototype.includes()

เราจะรวบรวมพวกเขาเป็น ES5 โดยใช้ babeljs ขึ้นอยู่กับความต้องการโครงการของคุณคุณยังสามารถคอมไพล์โค้ดใน ecma เวอร์ชันใดก็ได้เช่น ES7 ถึง ES6 หรือ ES7 ถึง ES5 เนื่องจากเวอร์ชัน ES5 มีความเสถียรที่สุดและทำงานได้ดีกับเบราว์เซอร์รุ่นใหม่และรุ่นเก่าทั้งหมดเราจะรวบรวมรหัสเป็น ES5

Async-Await

Async เป็นฟังก์ชันอะซิงโครนัสซึ่งส่งคืนสัญญาโดยปริยาย สัญญาจะได้รับการแก้ไขหรือปฏิเสธ ฟังก์ชัน Async เหมือนกับฟังก์ชันมาตรฐานทั่วไป ฟังก์ชันสามารถมีนิพจน์รอคอยซึ่งจะหยุดการดำเนินการชั่วคราวจนกว่าจะส่งคืนคำสัญญาและเมื่อได้รับแล้วการดำเนินการจะดำเนินต่อไป Await จะทำงานก็ต่อเมื่อฟังก์ชันเป็น async

นี่คือตัวอย่างการทำงานบน async และรอ

ตัวอย่าง

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

เพิ่มนิพจน์ await ก่อนที่ฟังก์ชันจับเวลาจะถูกเรียกใช้ ฟังก์ชั่นจับเวลาจะคืนสัญญาหลังจาก 5 วินาที ดังนั้นการรอจะหยุดการดำเนินการจนกว่าสัญญาเกี่ยวกับฟังก์ชันตัวจับเวลาจะได้รับการแก้ไขหรือปฏิเสธและดำเนินการต่อในภายหลัง

ตอนนี้ให้เราย้ายรหัสด้านบนไปที่ ES5 โดยใช้ 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();

คำสั่ง

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 ไม่รวบรวมวัตถุหรือวิธีการ ดังนั้นคำสัญญาที่ใช้ในที่นี้จะไม่ปรากฏและจะแสดงตามที่เป็นอยู่ เพื่อรองรับคำสัญญาบนเบราว์เซอร์รุ่นเก่าเราจำเป็นต้องเพิ่มรหัสซึ่งจะรองรับคำสัญญา ในตอนนี้ให้เราติดตั้ง babel-polyfill ดังนี้ -

npm install --save babel-polyfill

ควรบันทึกเป็นการพึ่งพาและไม่ใช่การพึ่งพาผู้พัฒนา

ในการรันโค้ดในเบราว์เซอร์เราจะใช้ไฟล์ polyfill จาก node_modules \ babel-polyfill \ dist \ polyfill.min.js และเรียกใช้โดยใช้แท็กสคริปต์ดังที่แสดงด้านล่าง -

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

คุณลักษณะนี้ให้เป็นจริงหากองค์ประกอบที่ส่งผ่านไปมีอยู่ในอาร์เรย์และเป็นเท็จหากเป็นอย่างอื่น

ตัวอย่าง

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 - อาร์เรย์รวม

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>

เอาต์พุต