Front-end xoay quanh

Babel getting started!

Babel getting started!

Sau một thời gian nghỉ lễ 30/04 – 01/05 dài dằng dặc thì mình lại comeback đây, hôm nay khi mà mình đang viết bài này thì ngoài trời đang nóng lắm các bạn ạ ^^. Cập nhật chút thôi chúng ta đi vào bài viết thôi nào.

1. Mở đầu

Như mình đã giới thiệu ở đầu bài bên ngoài, thì Babel được sinh ra để giúp cho các lập trình viên đỡ khổ sở hơn khi mà phải làm việc với các Browser khác nhau như: Chrome, EI, Firefox, …. Để khi mà compile code xong thì có thể chạy được trên tất cả các trình duyệt mà không bị lỗi.

Tổng quan hơn một chút nữa là các Browser khác nhau thì sẽ có sự cập nhật các Feature mới của JS là khác nhau, các bạn có thể tìm được sự cập nhật này tại trang mozilla. Dưới đây là một bảng tổng quan về Map method các bạn có thể tham khảo nhé.

2. Chi tiết

Định nghĩa chung: Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in old browsers or environments. (Như trên trang chủ của Babel)

Dịch ra thì chúng ta có thể hiểu nó là: Babel là một công cụ được dùng để covert những định dạng ECMAScript 2015 trở về sau thành version cũ hơn để phù hợp với các Browser và môi trường cũ.

Trước khi vào phần bên dưới mình muốn bạn hãy tạo ra mấy file nhỏ nhỏ để làm nhé (Ở phần setup) hoặc nếu không thì các bạn cũng có thể checkout git của mình về nhé.

Setup

Bước 1: Tạo một file package.json.

{
  "name": "babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Bước 2: Tạo một file index.html để mở trên trình duyệt.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="index.js"></script>
</body>
</html>

Bước 3: Tạo một file index.js để dùng thử Babel.

const arr = [1, 2, 3];
const [a, b, c] = arr;

console.log("a", a);
console.log("b", b);
console.log("c", c);

const fn = () => 1;

Nếu các bạn thử chạy file index.html với EI thì các bạn sẽ get ra lỗi như sau:

Còn nếu chạy ở chrome thì sẽ get ra kết quả log chạy bình thường. Đó chính là sự khác biệt và lí do lên dùng Babel.

Cách cài đặt

Khi vào dự án, thì các bạn sẽ có 2 cách cài đặt cli của babel nhé: Global or Local project.

Đối với Global: Là khi mà các bạn muốn cài đặt nó vào trong máy luôn, không cần qua package trong dự án. Chúng ta sẽ dùng lệnh npm install -g babel or yarn global add babel. Để kiểm tra xem cài được chưa thì có thể check babel -V.

Đối với Lobal: Ở đây các bạn sẽ cài nó trong devDependencies nhé. Chúng ta có thể dùng yarn hoặc npm. yarn add babel-cli -D or npm install -D babel-cli để kiểm tra đã cài được hay chưa chúng ta có thể check file package hoặc vào folder node_modules để kiểm tra nhé. ^^

Như vậy, đây là 2 cách mà chúng ta sẽ dùng nhé các bạn. Và theo như suggest của mình thì lên cài ở local nhé vì như vậy cùng một đội dev với nhau sẽ có cùng kết quả khi gen code ra. Tránh tình trạng người version cao, người version thấp rồi dẫn đến conflict không cần thiết (tốn time). 😀

Cách dùng

Như mình đã nói ở trên, chúng ta lên cài đặt Babel ở bên trong Project để tránh conflict và trong hướng dẫn này thì chủ yếu mình sẽ làm theo cách này nhé nhưng các bạn cũng đừng hoang mang, nó chỉ là cách để Babel cli ở đâu thôi còn câu lệnh thì vẫn thế.

Đầu tiên hãy cài thêm presets (Mình có nói đến ở dưới đó) để dùng nhé.

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

Chúng ta sẽ tạo thêm file .babelrc vào bên trong root dự án nhé, cùng với file package.json có nội dung như sau:

{
    "presets": [
        "env"
    ]
}

Rồi tiếp theo hãy tạo một file đích result (tên là gì cũng được), rồi chạy lệnh:

babel src -d result

Các bạn sẽ thấy nó render ra cho một file js tương ứng ở bên result mà code bên result này đã được viết lại theo kiểu JS cũ.

Hãy chỉnh lại file html trước khi chạy trên IE nhé.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./result/index.js"></script>
</body>
</html>

Và như vậy khi chạy file này ở IE thì vẫn log ra bình thường nhé các bạn.

Babel Polyfill

Các bạn hãy hiểu là không phải tính năng nào của JS cũng được compile ra dạng cũ hơn vì đơn giản là nó không có cái cũ hơn, nó là tính năng mới hoàn toàn ^^. Như vậy Babel Polyfill ra đời như là thư viện để chuyển hóa những tính năng như: Promises and generator functions thành code JS.

Các plugin

Đây là các phần mà các bạn muốn config rieeng biệt cho từng phần mà mình muốn chuyển đổi, ví dụ như là khi muốn chuyển Arrow function sang function thường, chuyển async await function sang Generator function, ….

  • @babel/plugin-transform-arrow-functions (Chuyển arrow function sang function thường)
  • @babel/plugin-transform-classes (Chuyển class sang function)
  • …..
  • Nó quá nhiều các bạn tự xem nhé (ở đây) ^^

Các presets

Đây là các phần mà chúng ta chỉ cần setting trong file config như trên thì nó sẽ tự động được cài đặt mà ta không phải làm thêm gì nhé. Nếu muốn nhẹ đầu thì cứ làm việc với các Presets nhé ^^, dưới đây là một số Presets hay dùng:

Các trường hợp hay dùng

Ngoài dùng độc lập Babel, ta cũng có thể dùng nó với Tool khác như là Webpack (Mình sẽ viết nó ở một bài khác – Đây là tool để bundle file mà các FE Dev rất hay dùng). Nhưng cho dù như thế nào thì Babel cũng dùng để chuyển code version mới thành version cũ hơn ES6 thôi nhé các bạn.

3. Kết luận

Babel là một công cụ vô cùng mạnh mẽ, nó giúp cho FE Developer đỡ cực nhọc hơn khi mà phải làm việc với nhiều trình duyệt và nếu các bạn hiểu được cơ bản về babel như mình trình bày ở trên thì có lẽ bạn đã lại biết thêm một điều hết sức bổ ích nữa rồi đó. Chúc bạn thành công trên con đường phát triển bản thân cũng như sản phẩm mình đang làm nhé.

P/s: Mặc dù thời gian vừa rồi ra nhiều bài nhưng mình nhận thấy nó không được hay lắm, vẫn còn khá nhiều thiếu xót. Mình vẫn đang cố gắng khắc phục dần, anyway cũng cám ơn bạn nếu bạn đã đọc được đến đây nhé – hãy động viên mình bằng cách comment xuống bên dưới xem bạn muốn mình viết về chủ đề nào tiếp theo nhé.

4. Tham khảo

# Babel is a JavaScript compiler.
# A Beginner’s Guide to Babel

Tagged , , , ,
0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments