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