Babel js là gì ?

Babel là công cụ thường được đề cập đến trong các bài hướng dẫn về ReactJS. Tài liệu cũng như hướng dẫn của Babel rất ngắn gọn và vô tình điều này gây không ít cản trở cho những người mới học. Trong khuôn khổ bài viết này chúng ta sẽ cùng tìm hiểu về công cụ Babel và cách sử dụng nó.

Babel Là Gì ?

Babel là một công cụ chuyển đổi mã lệnh JavaScript hay JavaScript transpiler, được dùng với mục đích chuyển đổi mã lệnh JavaScript được viết dựa trên tiêu chuẩn ECMAScript phiên bản mới về phiên bản cũ hơn trước đó.

Chuẩn ECMAScript được ra đời để hạn chế sự khác biệt giữa các "ngôn ngữ" JavaScript khác nhau được định nghĩa bởi các trình duyệt.

Chú ý : Thuật ngữ ECMAScript thường được viết tắt là ES.

Why? Tại sao đã có ECMAScript để tiêu chuẩn hoá cách viết JavaScript rồi thì lại còn cần sử dụng thêm Babel nữa?

Tại Sao Cần Sử Dụng Babel

Công nghệ thay đổi theo từng giây và đương nhiên sự thay đổi dẫn đến sự cũ kỹ và hạn chế. ECMAScript cũng ko nằm ngoài quy luật này. Như các bạn biết thời buổi ngày nay công nghệ thay đổi liên tục tới chóng mặt và các trình duyệt cũng không đứng ngoài để ngắm nhìn làn sóng của sự thay đổi này.

Như vậy trường hợp như các bạn viết code JavaScript dựa trên ES6 thì có nhiều khả năng code của bạn chạy không đúng hoặc thậm chí là không chạy được trên các trình duyệt khác nhau. Để khắc phục tình huống này thì sẽ cần có một công cụ chuyển đổi mã lệnh JavaScript viết dựa trên ES6 về chuẩn cũ hơn. Và Babel được cho ra đời để đáp ứng nhu cầu trên.

Lưu ý phiên bản thứ 6 của ECMASCript hay ES6 được ra đời năm 2015 chứ không phải năm 2016 và còn được gọi là ECMASCript 2015.

Cài Đặt và Sử Dụng Babel

Tuỳ theo nhu cầu sử dụng chúng ta có thể cài đặt Babel trực tiếp trên web browser hoặc thông qua Node Package Manager:

Cài Đặt và Sử Dụng Babel Trên Browser

Với cách làm này chúng ta sẽ cần nhúng thư viện Babel (JavaScript) vào trang web thông qua thẻ <script>. Ví dụ sau sử dụng thư viện Babel đã được tinh giản (minified) từ CDN server:

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
Sau đó bạn cần đặt code JavaScript được viết theo ES6 trong thẻ <script type="text/babel">:

<div id="output"></div>

<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>

Lưu ý rằng thuộc tính type trong thẻ mở <script>ở trên là text/babel thay vì text/javascript.

Khi tải trang, thư viện Babel sẽ chuyển đổi mã lệnh viết trong thẻ<script type="text/babel"> về mã JavaScript viết theo ES5 qua đó trình duyệt có thể hiểu được.

Cài Đặt và Sử Dụng Babel CLI

Sử Dụng Babel CLI cho phép chúng ta chạy câu lệnh babel trên cửa sổ dòng lệnh để chuyển đổi mã JavaScript viêt theo ES6 về ES5.

Nếu so sánh với cách làm trước thì cách làm này sẽ giúp cải thiện tốc độ chạy ứng dụng. Ngoài ra, việc sử dụng Babel trên browser cũng gặp một số hạn chế về tính năng hơn so với việc sử dụng Babel CLI.

Babel CLI có thể được cài đặt thông qua Node Package Manager.

Để cài đặt Babel CLI trên toàn hệ thống:

$ npm install --g babel-cli

Kiểm tra lại cài đặt:

$ babel --version

Để cài đặt Babel CLI trong phạm vi một dự án cụ thể:

$ npm install --save-dev babel-cli

Kiểm tra lại cài đặt:

$ ./node_modules/.bin/babel --version

Việc sử dụng Babel CLI trong phạm vi một dự án cụ thể được khuyên dùng do các dự án khác nhau có thể sử dụng các phiên bản Babel CLI khác nhau và sẽ hạn chế rủi ro đụng phiên bản nếu như bạn chạy nhiều dự án cùng lúc trên cùng một máy.

Lưu ý: Trường hợp Babel CLI được cài cùng lúc trên toàn hệ thống lẫn trong phạm vi của dự án thì khi cần sử dụng công cụ này ở dự án cụ thể thì bạn cần tham chiếu tới địa chỉ của tập tin ./node_modules/.bin/babel.