Babel Là Gì và Sử Dụng Babel Như Thế Nào

Babel là công cụ thường được đề cập đến trong các bài hướng dẫn về ReactJS. Không ít lập trình viên trong quá trình học đã gặp phải khó khăn trong việc tiếp cận và sử dụng công cụ này, lý do là bởi vì tài liệu hướng dẫn của Babel tương đối ngắn gọn và điều này vô tính gây không ít cản trở cho những người mới học. Bài viết này dành cho các lập trình viên mới bắt đầu 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 đó.

Đọc xong đoạn trên sẽ không ít bạn sẽ tự đặt ra câu hỏi ECMAScript là gì, không phải là ngôn ngữ JavaScript đã có sẵn các quy tắc để lập trình rồi hay sao?

Đúng là JavaScript đã có sẵn các quy tắc để lập trình, tuy nhiên do JavaScript chủ yếu được chạy trên môi trường trình duyệt và mỗi trình duyệt khác nhau như Chrome, Firefox, Internet Explore, Safari... có những quy định riêng để viết JavaScript. Điều này dẫn đến không chỉ có duy nhât một quy định (ngôn ngữ) JavaScript và nếu như bạn code tuân theo "ngôn ngữ" JavaScript của một trình duyệt thì khi chạy trên trình duyệt khác hoàn toàn có khả năng code của bạn sẽ không chạy như ý muốn. Do đó 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.

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

Tới đây chúng ta đã hiểu lý do mục đích đến trái đất của ECMAScript rồi phải không. Quay lại chủ đề chính của chúng ta là Babel, câu hỏi tiếp theo đặt ra cho các bạn đó là 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

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. Chrome, Firefore, IE, Edge... liên tục ra các phiên bản mới để thêm tính năng cũng như khắc phục lỗi. Và từ những sự cải tiến này các nhà sản xuất trình duyệt nhận thấy có những hạn chế trong tiêu chuẩn ECMAScript đang sử dụng và đòi hỏi cần có sự thay đổi trong chính tiêu chuẩn này. Kết quả của nó đó là ra đời các tiêu chuẩn mới ECMAScript, nói đúng hơn là phiên bản mới cho tiêu chuẩn ECMAScript. Phiên bản phổ biến của ECMASCript đang được nhiều trình duyệt hỗ trợ hiên nay là ES phiên bản thứ 5 (5th edition) hay ES5. Phiên bản kế tiếp ES6 mặc dù đã được chính thức ra đời tuy nhiên lại mới chỉ được một số trình duyệt hỗ trợ và không hoàn toà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ề ES5. Và Babel được cho ra đời để đáp ứng nhu cầu trên.

Cũng xin được lưu ý với các bạn đọc ở đây luôn đó là 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.

Babel Plugin và Babel Preset

Sau khi cài đặt Babel CLI thì để thực hiện các tác vụ nhất định chúng ta sẽ cần thêm các plugin. Mỗi plugin khác nhau sẽ thực hiện các tác vụ khác nhau.

Để sử dụng plugin của Babel chúng ta chạy câu lệnh sau:

$ babel --plugins [list]

Thay [list] ở câu lệnh trên bằng danh sách tên các plugin cần dùng.

Tuy nhiên trên thực tế chúng ta hiếm khi sử dụng một plugin riêng lẻ, thay vào đó chúng ta sẽ sử dụng một nhóm các plugin khác nhau, và mỗi nhóm các plugin được gom lại thành một preset.

Cú pháp của câu lệnh sử dụng Babel kèm theo bộ preset:

$ babel --presets [list]

Bây giờ chúng ta sẽ tìm hiểu cách sử dụng một preset có tên là babel-preset-env. Preset này được dùng khá thông dụng vì nó thưc hiện thao tác phổ biến là chuyển đổi từ ES6 về ES5.

Trước tiên chúng ta sẽ tạo một tập tin script.js chứa mã lệnh JavaScript viết theo ES6:

const ES = "ECMAScript";
let ed = "6th";
console.log(ES + " " + ed + " edition")

Trước khi có thể sử dụng preset chúng ta cần cài đặt chúng. Chạy câu lệnh sau để cài đặt babel-preset-env preset (bạn có thể cài đặt preset trong phạm vi toàn hệ thống nếu muốn):

$ npm install --save-dev babel-preset-env

Và bây giờ chúng ta có thể sử dụng Babel cùng với babel-preset-env preset để thực hiện việc chuyển đổi mã lệnh JavaScript trong tập tin script.js này về ES5:

$ babel --presets babel-preset-env script.js

Câu lệnh trên sẽ hiển thị kết quả như sau:

"use strict";

var ES = "ECMAScript";
var ed = "6th";
console.log(ES + " " + ed + " edition");

Bạn có thể thấy mã lệnh JavaScript trong kết quả ở trên được viết theo ES5.

Để chuyển đổi đồng thời lưu kết quả ra một tập tin khác bạn thêm tuỳ chọn -o như sau:

$ babel --presets babel-preset-env script.js -o output.js

Kết thúc câu lệnh bạn sẽ thấy tập tin output.js được tạo ra với nội dung giống những gì bạn được thấy ở câu lệnh ngay trước đó.

Kết Luận

Dù chưa hoàn toàn được hỗ trợ bởi các trình duyệt tuy nhiên ES6 đang được đón nhận mạnh mẽ bởi các công ty công nghệ lớn chuyên về lĩnh vực sản xuất trình duyệt cũng như cộng đồng lập trình viên trên thế giới. Đọc xong bài viết này nếu như bạn muốn học thêm về ES6 thì bạn có thể tham khảo thêm khoá học ES6 Cơ bản viết dành riêng cho những bạn nào muốn tìm hiểu về ES6 trong thời gian ngắn nhất có thể.