Khi thao tác với những Framework JavaScript hiện nay, chắc hẳn chữ “Babel” hay “Babel JS” sẽ đập vào mặt bạn, nhất là lúc tạo project mới đúng không nào nào? Vậy bạn đã từng thắc mắc “Babel JS là gì” chưa, “Vì sao lúc nào tạo project mà cũng nhìn thấy nó nhỉ?”. Hôm nay, mình sẽ cùng các bạn tìm hiểu về Babel JS nhé!

Bạn Đang Xem: Babel JS là gì? Tại sao phải dùng Babel JS?

Babel JS là gì?

Babel hay Babel JS là một trình biên dịch JavaScript, mã nguồn mở và miễn phí. Babel được sử dụng để biên dịch ECMAScript (ES) thành phiên bản tương thích ngược với JavaScript có thể chạy trên các môi trường tự nhiên JavaScript cũ hơn. Babel là dụng cụ phổ quát để sử dụng các tính năng tiên tiến nhất trong JavaScript.

Ủa, ECMAScript ra mắt để viết JavaScript “chuẩn” và “dễ” hơn nhưng vì sao vẫn phải dùng thêm Babel vậy?

Vì sao phải dùng Babel JS?

Hãy nói về ECMAScript (ES), mỗi năm họ cho ra 1 “phiên bản” mới dành riêng cho JavaScript, rất nhiều các công nghệ mới được update. Có thể chỉ là một vài update rất nhỏ, có khi là một cuộc cách mệnh lớn. Dù sao đi chăng nữa thì vẫn có sự thay đổi.

Vì vậy, nếu dự án của bạn lớn và liên tục phải bảo trì và update các tính năng mới như Google, Facebook,… chẳng hạn. Bạn cứ thử tượng tưởng khi công nghệ thay đổi thì mình cùng phải thay đổi theo nó, do đó một số code cũ có khi sẽ không còn thể chạy được và cần update.

Điều này tốn rất nhiều thời kì và có thể phát sinh ra nhất nhiều lỗi. Nhưng khi có Babel JS, nó sẽ giúp tất cả chúng ta chuyển đổi các code mới về các chuẩn code cũ hơn. Lúc đó, code của tất cả chúng ta sẽ sở hữu được thể chạy được trên các hệ điều hành, trình duyệt cũ,… Thật tuyệt vời phải không nào?

Thiết lập Babel JS

Babel JS có thể nhúng trực tiếp vào website thông qua thẻ <scriptvàgt;.

<script src=”https://unpkg.com/[email protected]/babel.min.js”></scriptvàgt; Code language: HTML, XML (xml)

Ngoài ra, Babel JS cũng được đóng gói vào các package. Để setup, tất cả chúng ta cần thông qua npm:

npm install -save-dev babel-cli

Với cách này, website của các bạn sẽ cải thiện được hiệu năng, tốc độ và sử dụng được toàn bộ tính năng của Babel JS mà không có lỗi phát sinh.

Một số tính năng của Babel JS

Class

Từ ES6, JavaScript đã xuất hiện Class:

class Person {} var dave = new PersonCode language: JavaScript (javascript)

Nếu chạy project thông qua Babel JS, tất cả chúng ta sẽ nhận được những dòng code như sau:

“use strict”; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(“Cannot call a class as a function”); } } var Person = function Person() { _classCallCheck(this, Person); }; var dave = new Person();Code language: JavaScript (javascript)

Xem Thêm : Check in và check out nghĩa là gì? Thủ tục trong khách sạn thế nào?

Tất cả chúng ta có hàm Person, có thể được sử dụng như một prototype constructor và hàm _classCallCheck để kiểm tra kiểu của instance.

Multiline Strings

ES6 cũng tồn tại một cách khái niệm chuỗi mới. Ký hiệu backtick (`) được chấp nhận bạn tạo chuỗi nhiều dòng. Điều này đặc biệt quan trọng hữu ích khi xác định các template trong JavaScript.

Ví dụ khi sử dụng trong Angular:

var template = ` <divvàgt; <h1vàgt;hello {{name}}</h1vàgt; </divvàgt; `Code language: HTML, XML (xml)

Và nó sẽ chuyển thành:

var template = ” <divvàgt; <h1vàgt;hello {{name}}</h1vàgt; </divvàgt; “;Code language: HTML, XML (xml)

Template Literals trong JavaScript

Fat Arrows

Arrow Function (Fat Arrows) hay còn được gọi là hàm “mũi tên béo”, cung cấp cho tất cả chúng ta một cú pháp hay để xác định các hàm ẩn danh.

(x, y) => {return x + y}; Code language: PHP (php)

Babel JS sẽ cho tất cả chúng ta:

(function (x, y) { return x + y; });Code language: JavaScript (javascript)

Khi muốn gọi hàm, mình sẽ sử dụng:

(x, y) => {return x + y} (1,2);Code language: PHP (php)

Và Babel ơiii:

(function (x, y) { return x + y; })(1, 2);Code language: JavaScript (javascript)

Arrow Function là gì?

Fat Arrows với một thông số

x => x + 1Code language: PHP (php)

Xem Thêm : Chất oxi hóa là gì? Chất khử là gì? Các chất oxi hóa thường gặp

Được dịch thành:

(function (x) { return x + 1; });Code language: JavaScript (javascript)

Fat Arrows trong thực tế

[1, 2, 99].map(num => console.log(num)); Code language: JavaScript (javascript)

Babel sẽ giúp ta:

[1, 2, 99].map(function (num) { return console.log(num); });Code language: JavaScript (javascript)

Fat Arrows với this

Từ khóa this được đặt trong JavaScript để trở thành đối tượng người tiêu dùng ngay trước dấu chấm khi hàm được gọi. Điều này là hợp lý, nhưng thường gây khó chịu, vì nó thỉnh thoảng yêu cầu cái này phải được lưu trong cái kia.

Từ khoá “this” trong JavaScript

Fat Arrows sẽ xử lý vấn đề này bằng phương pháp duy trì giá trị ngày nay của nó. việc này gọi là scope.

x = { y: function() { () => {console.log(this)}(); } }Code language: JavaScript (javascript)

Và:

x = { y: function y() { var _this = this; (function () { console.log(_this); })(); } };Code language: JavaScript (javascript)

Tất cả chúng ta có thể thấy rằng giá trị của this đã được lưu trữ trong một biến bên trong clousure.

Tóm lại

Trên đây chỉ là ví dụ về các một số tính năng của Babel JS. Các tính năng khác các bạn cũng có thể tham khảo trên trang doc của Babel JS tại đây. Nội dung bài viết đã trả lời phần nào về vướng mắc “Babel JS là gì” của bạn. Cùng đón xem những viết mới của Học JavaScript nhé!

Các bạn cũng có thể tham khảo các nội dung bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG