Babel JS là gì? Tại sao phải dùng Babel JS?

Khi làm việc với các 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à khi tạo project mới đúng không nào? Vậy bạn đã từng thắc mắc “Babel JS là gì” chưa, “Tại 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é!

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 JavaScript cũ hơn. Babel là công cụ phổ biến để sử dụng các tính năng mới nhất trong JavaScript.

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

Tại 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 cho JavaScript, rất nhiều các công nghệ mới được cập nhật. Có thể chỉ là một vài cập nhật rất nhỏ, có khi là một cuộc cách mạng 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à cập nhật 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 thể chạy được và cần cập nhật.

Điều này tốn rất nhiều thời gian và có thể phát sinh ra nhất nhiều lỗi. Nhưng khi có Babel JS, nó sẽ giúp 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 chúng ta sẽ 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?

Cài đặt Babel JS

Babel JS có thể nhúng trực tiếp vào trang web thông qua thẻ <script>.

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
Code language: HTML, XML (xml)

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

npm install --save-dev babel-cli

Với cách này, trang web của 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, 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)

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 có một cách định nghĩa chuỗi mới. Ký hiệu backtick (`) cho phép bạn tạo chuỗi nhiều dòng. Điều này đặc biệt hữu ích khi xác định các template trong JavaScript.

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

var template = `
<div>
  <h1>hello {{name}}</h1>
</div>
`Code language: HTML, XML (xml)

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

var template = "
  <div>
    <h1>hello {{name}}</h1>
  </div>
  ";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 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 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 tham số

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

Đượ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 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ó đôi khi 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ẽ giải quyết vấn đề này bằng cách duy trì giá trị hiện tại của nó. Vấn đề 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)

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.

Kết luận

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ó thể tham khảo trên trang doc của Babel JS tại đây. Bài viết đã giải đáp phần nào về câu hỏi “Babel JS là gì” của bạn. Cùng đón xem các viết mới của Học JavaScript nhé!

Các bạn có thể tham khảo các 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