BabelJS - Thực thi mã ES6
BabelJSlà một trình chuyển tiếp JavaScript, chuyển đổi các tính năng mới được thêm vào JavaScript thành ES5 hoặc để phản ứng dựa trên cài đặt trước hoặc plugin được cung cấp. ES5 là một trong những dạng JavaScript lâu đời nhất và được hỗ trợ để chạy trên các trình duyệt mới và cũ mà không gặp bất kỳ sự cố nào. Trong hầu hết các ví dụ trong hướng dẫn này, chúng tôi đã chuyển mã sang ES5.
Chúng tôi đã thấy nhiều tính năng như hàm mũi tên, lớp, lời hứa, trình tạo, hàm không đồng bộ, v.v. được thêm vào ES6, ES7 và ES8. Khi bất kỳ tính năng mới được bổ sung nào được sử dụng trong các trình duyệt cũ, nó sẽ tạo ra lỗi. BabelJS giúp biên dịch mã, tương thích ngược với các trình duyệt cũ hơn. Chúng tôi đã thấy rằng ES5 hoạt động hoàn toàn tốt trên các trình duyệt cũ hơn mà không gặp bất kỳ vấn đề nào. Vì vậy, xem xét chi tiết môi trường dự án, nếu nó được yêu cầu chạy trên các trình duyệt cũ hơn, chúng tôi có thể sử dụng bất kỳ tính năng mới nào trong dự án của mình và biên dịch mã sang ES5 bằng babeljs và sử dụng bất kỳ trình duyệt nào mà không gặp bất kỳ vấn đề nào.
Chúng ta hãy xem xét ví dụ sau để hiểu điều này.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>BabelJs Testing</title>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
tệp index.js
var _foo = () => {
return "Hello World"
};
alert(_foo());
Đầu ra
Khi chúng tôi chạy html ở trên trong trình duyệt Chrome, chúng tôi nhận được kết quả sau:
Khi chạy HTML trong Firefox, nó tạo ra kết quả sau:
Và khi chạy cùng một HTML trong Internet Explorer, nó sẽ tạo ra lỗi cú pháp sau:
Chúng tôi đã sử dụng hàm Arrow của ES6; điều tương tự không hoạt động trên tất cả các trình duyệt như đã thấy ở trên. Để làm cho điều này hoạt động, chúng tôi có BabelJS để biên dịch mã thành ES5 và sử dụng nó trong tất cả các trình duyệt.
Sẽ biên dịch tệp js thành es5 bằng babeljs và kiểm tra lại trên các trình duyệt.
Trong tệp html, chúng tôi sẽ sử dụng index_new.js như hình dưới đây:
<!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());