BabelJS - การดำเนินการรหัส ES6
BabelJSเป็นตัวแปลงสัญญาณ JavaScript ซึ่งจะแปลงคุณสมบัติใหม่ที่เพิ่มให้กับ JavaScript เป็น ES5 หรือเพื่อตอบสนองตามค่าที่ตั้งไว้ล่วงหน้าหรือปลั๊กอินที่กำหนด ES5 เป็นหนึ่งในรูปแบบ JavaScript ที่เก่าแก่ที่สุดและได้รับการสนับสนุนให้ทำงานบนเบราว์เซอร์ใหม่และเก่าโดยไม่มีปัญหาใด ๆ ในตัวอย่างส่วนใหญ่ในบทช่วยสอนนี้เราได้เปลี่ยนรหัสเป็น ES5
เราได้เห็นคุณสมบัติมากมายเช่นฟังก์ชันลูกศรคลาสสัญญาเครื่องกำเนิดไฟฟ้าฟังก์ชัน async และอื่น ๆ ที่เพิ่มเข้ามาใน ES6, ES7 และ ES8 เมื่อมีการใช้คุณลักษณะที่เพิ่มเข้ามาใหม่ในเบราว์เซอร์เก่าจะทำให้เกิดข้อผิดพลาด BabelJS ช่วยในการรวบรวมโค้ดซึ่งเข้ากันได้กับเบราว์เซอร์รุ่นเก่า เราได้เห็นว่า ES5 ทำงานได้ดีอย่างสมบูรณ์บนเบราว์เซอร์รุ่นเก่าโดยไม่มีปัญหาใด ๆ ดังนั้นเมื่อพิจารณาถึงรายละเอียดสภาพแวดล้อมของโครงการหากจำเป็นต้องใช้งานบนเบราว์เซอร์รุ่นเก่าเราสามารถใช้คุณลักษณะใหม่ ๆ ในโครงการของเราและรวบรวมรหัสเป็น ES5 โดยใช้ babeljs และใช้เบราว์เซอร์ใดก็ได้โดยไม่มีปัญหาใด ๆ
ให้เราพิจารณาตัวอย่างต่อไปนี้เพื่อทำความเข้าใจสิ่งนี้
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>BabelJs Testing</title>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
ไฟล์ index.js
var _foo = () => {
return "Hello World"
};
alert(_foo());
เอาต์พุต
เมื่อเราเรียกใช้ html ด้านบนในเบราว์เซอร์ Chrome เราจะได้ผลลัพธ์ดังต่อไปนี้ -

เมื่อ HTML ถูกเรียกใช้ใน Firefox จะสร้างผลลัพธ์ต่อไปนี้ -

และเมื่อ HTML เดียวกันถูกเรียกใช้ใน Internet Explorer จะสร้างข้อผิดพลาดทางไวยากรณ์ต่อไปนี้ -

เราได้ใช้ฟังก์ชัน ES6 Arrow; สิ่งเดียวกันนี้ใช้ไม่ได้กับเบราว์เซอร์ทั้งหมดตามที่เห็นด้านบน เพื่อให้ได้ผลเรามี BabelJS เพื่อรวบรวมรหัสเป็น ES5 และใช้ในเบราว์เซอร์ทั้งหมด
จะรวบรวมไฟล์ js เป็น es5 โดยใช้ babeljs และตรวจสอบอีกครั้งในเบราว์เซอร์

ในไฟล์ html เราจะใช้ index_new.js ดังที่แสดงด้านล่าง -
<!DOCTYPE html>
<html>
<head>
<title>BabelJs Testing</title>
</head>
<body>
<script type="text/javascript" src="index_new.js"></script>
</body>
</html>
index_new.js
"use strict";
var _foo = function _foo() {
return "Hello World";
};
alert(_foo());
เอาต์พุต Chrome

เอาต์พุตเบราว์เซอร์ Firefox

เอาต์พุตเบราว์เซอร์ IE
