[React] Babel là gì? Tổng quan về Bable trong React

Babel Là Gì?

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

Babel đảm bảo code của các lập trình viên luôn được biên dịch thành phiên bản tương thích các trình duyệt khác nhau mà không lo bị lỗi.

"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 khác nhau".

Ví dụ:

Code JS theo chuẩn ES6

const numbers = [ 5, 10, 15];
console.log(numbers.map(number => number + 5)); // [10, 15, 20]

Babel biên dịch thành

var numbers = [ 5, 10, 15];
console.log(numbers.map(function (number) {
  return number + 5;
})); //

Mặc 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 cũng như cộng đồng lập trình viên trên thế giới.

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

Để cài đặt Babel có thể chúng ta cài trực tiếp trên web browser hoặc thông qua Node Package Manager(npm):

Cách 1: 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"> qua đó trình duyệt sẽ hiểu được.

Ví dụ:

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

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

Cách 2: Cài đặt và sử dụng Babel bằng 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 1 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 npm. Chúng ta cũng có thể cài đặt Babel  trên toàn hệ thống hoặc riêng lẻ từng dự án:

2.1. Để 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

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

npm install --save-dev @babel/core @babel/cli

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

./node_modules/.bin/babel --version

Khuyến nghị: 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.

Vì npm bây giờ đi kèm với npx, các gói CLI được cài đặt cục bộ có thể chạy bằng cách gõ lệnh vào thư mục dự án.

Do đó, chúng tôi có thể chạy Babel chỉ bằng lệnh:

npx babel script.js

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

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. Bạn có thể vào đây để xem các danh sách các plugin Babel.

Ví dụ: Để giải quyết vấn đề mà chúng tôi đã đề cập trong phần giới thiệu "sử dụng các function mũi tên trong mọi trình duyệt", chúng tôi có thể chạy lệnh cài đặt:

npm install --save-dev  @babel/plugin-transform-arrow-functions

Bây giờ nếu chúng ta có một script.js với nội dung này:

var a = () => { };
var a = (b) => b;
const double = [1, 2, 3].map((num) => num * 2);
console.log(double); // [2,4,6]

var bob = {
    _name: “Bob”,
    _friends: [“Sally”, “Tom”],
    printFriends() {
        this._friends.forEach(f =>
            console.log(this._name + " knows " + f));
    }
};
console.log(bob.printFriends());

Babel biên dịch script.js như sau:

var a = function () { }; var a = function (b) {
    return b;
};
const double = [1, 2, 3].map(function (num) {
    return num * 2;
}); console.log(double); // [2,4,6]

var bob = {
    _name: “Bob”,
    _friends: [“Sally”, “Tom”],
    printFriends() {
        var _this = this;

Như bạn có thể thấy, tất cả các hàm mũi tên đã được chuyển đổi thành các hàm JavaScript ES5.

Babel Preset

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ác cài đặt trước phổ biến nhất là env và  react.

Với env đặt trước

Các env cài đặt trước rất hay: bạn có thể cho nó biết môi trường nào bạn muốn hỗ trợ và nó làm mọi thứ cho bạn, nó hỗ trợ tất cả các tính năng JavaScript hiện đại.

Ví dụ: “hỗ trợ 2 phiên bản cuối cùng của mọi trình duyệt, nhưng đối với Safari, hãy hỗ trợ tất cả các phiên bản kể từ Safari 7`

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

hoặc “Tôi không cần hỗ trợ trình duyệt, chỉ cần để tôi làm việc với Node.js 6.10 ”

{
  "presets": [
    ["env", {
      "targets": {
        "node": "6.10"
      }
    }]
  ]
}

Với react đặt trước

Các react cài đặt trước rất thuận tiện khi viết ứng dụng React: thêm preset-flow, syntax-jsx, transform-react-jsx, transform-react-display-name.

Để phát triển ứng dụng React với các chuyển đổi JSX và hỗ trợ Flow, đơn giản là bạn chỉ cần thêm tất cả vào.

Xem thêm Babel Preset