BabelJS - Tổng quan

BabelJSlà một trình chuyển đổi JavaScript chuyển các tính năng mới thành tiêu chuẩn cũ. Với điều này, các tính năng có thể được chạy trên cả trình duyệt cũ và mới, không gặp rắc rối. Một nhà phát triển người Úc, Sebastian McKenzie đã thành lập BabelJS.

Tại sao BabelJS?

JavaScript là ngôn ngữ mà trình duyệt hiểu được. Chúng tôi sử dụng các trình duyệt khác nhau để chạy các ứng dụng của mình - Chrome, Firefox, Internet Explorer, Microsoft Edge, Opera, UC browser, v.v. ECMA Script là đặc tả ngôn ngữ JavaScript; ECMA Script 2015 ES6 là phiên bản ổn định hoạt động tốt trên tất cả các trình duyệt mới và cũ.

Sau ES5, chúng tôi đã có ES6, ES7 và ES8. ES6 được phát hành với rất nhiều tính năng mới mà không phải trình duyệt nào cũng hỗ trợ đầy đủ. Điều tương tự cũng áp dụng cho ES7, ES8 và ESNext (phiên bản tiếp theo của ECMA Script). Hiện tại vẫn chưa chắc chắn khi nào thì tất cả các trình duyệt có thể tương thích với tất cả các phiên bản ES đã phát hành.

Trong trường hợp chúng tôi dự định sử dụng các tính năng của ES6 hoặc ES7 hoặc ES8 để viết mã của chúng tôi, nó sẽ có xu hướng bị hỏng trong một số trình duyệt cũ vì thiếu sự hỗ trợ của các thay đổi mới. Do đó, nếu chúng tôi muốn sử dụng các tính năng mới của ECMA Script trong mã của mình và muốn chạy nó trên tất cả các trình duyệt có thể có sẵn, chúng tôi cần một công cụ sẽ biên dịch mã cuối cùng của chúng tôi trong ES5.

Babeltương tự như vậy và nó được gọi là bộ chuyển tiếp chuyển mã trong phiên bản ECMA Script mà chúng tôi muốn. Nó có các tính năng như cài đặt trước và plugin, cấu hình phiên bản ECMA mà chúng ta cần để chuyển mã của mình. Với Babel, các nhà phát triển có thể viết mã của họ bằng cách sử dụng các tính năng mới trong JavaScript. Người dùng có thể lấy mã được chuyển đổi bằng Babel; mã sau đó có thể được sử dụng trong bất kỳ trình duyệt nào mà không gặp bất kỳ vấn đề gì.

The following table lists down the features available in ES6, ES7 and ES8 −

Đặc trưng	Phiên bản ECMA Script
Let + Const	ES6
Hàm mũi tên	ES6
Các lớp học	ES6
Lời hứa	ES6
Máy phát điện	ES6
Trình lặp lại	ES6
Mô-đun	ES6
Phá hủy	ES6
Chữ mẫu	ES6
Đối tượng nâng cao	ES6
Thuộc tính mặc định, Rest & Spread	ES6
Không đồng bộ - Đang chờ	ES7
Toán tử lũy thừa	ES7
Array.prototype.includes ()	ES7
Đệm chuỗi	ES8

BabelJS quản lý hai phần sau:

transpiling
polyfilling

Babel-Transpiler là gì?

Babel-transpiler chuyển đổi cú pháp của JavaScript hiện đại thành một biểu mẫu, mà các trình duyệt cũ có thể dễ dàng hiểu được. Ví dụ, các lớp hàm arrow, const, let sẽ được chuyển đổi thành function, var, v.v. Ở đây, cú pháp, tức là hàm mũi tên được chuyển đổi thành một hàm bình thường, giữ nguyên chức năng trong cả hai trường hợp.

Babel-polyfill là gì?

Có các tính năng mới được thêm vào JavaScript như hứa hẹn, bản đồ và bao gồm. Các tính năng có thể được sử dụng trên mảng; tương tự, khi sử dụng và chuyển đổi bằng cách sử dụng babel sẽ không được chuyển đổi. Trong trường hợp tính năng mới là một phương thức hoặc đối tượng, chúng ta cần sử dụng Babel-polyfill cùng với chuyển ngữ để làm cho nó hoạt động trên các trình duyệt cũ hơn.

Dưới đây là danh sách các tính năng của Tập lệnh ECMA có sẵn trong JavaScript, có thể được chuyển và ghép thành -

Classes
Decorators
Const
Modules
Destructing
Tham số mặc định
Tên thuộc tính được tính
Đối tượng nghỉ ngơi / lây lan
Hàm không đồng bộ
Hàm mũi tên
Các thông số còn lại
Spread
Chữ mẫu

ECMA Script features that can be polyfilled −

Promises
Map
Set
Symbol
Weakmap
Weakset
includess
Array.from, Array.of, Array # find, Array.buffer, Array # findIndex
Object.assign,Object.entries,Object.values

Các tính năng của BabelJS

Trong phần này, chúng ta sẽ tìm hiểu về các tính năng khác nhau của BabelJS. Sau đây là các tính năng cốt lõi quan trọng nhất của BabelJS:

Babel-Plugins

Plugin và Presets là các chi tiết cấu hình để Babel chuyển mã. Babel hỗ trợ một số plugin, có thể được sử dụng riêng lẻ, nếu chúng ta biết môi trường mà mã sẽ thực thi.

Babel-Presets

Các giá trị đặt trước của Babel là một tập hợp các phần bổ trợ, tức là, cấu hình chi tiết cho chương trình chuyển tiếp babel hướng dẫn Babel truyền tải trong một chế độ cụ thể. Chúng ta cần sử dụng các giá trị đặt trước, có môi trường mà chúng ta muốn mã được chuyển đổi. Ví dụ: cài đặt trước es2015 sẽ chuyển đổi mã thành es5 .

Babel-Polyfills

Có một số tính năng như phương thức và đối tượng, không thể chuyển đổi. Trong những trường hợp như vậy, chúng tôi có thể sử dụng babel-polyfill để tạo điều kiện sử dụng các tính năng trong bất kỳ trình duyệt nào. Chúng ta hãy xem xét ví dụ về những lời hứa; để tính năng hoạt động trong các trình duyệt cũ hơn, chúng tôi cần sử dụng polyfills.

Babel-Polyfills

Babel-cli đi kèm với một loạt lệnh mà mã có thể được biên dịch dễ dàng trên dòng lệnh. Nó cũng có các tính năng như plugin và cài đặt trước được sử dụng cùng với lệnh giúp dễ dàng chuyển mã một cách dễ dàng.

Ưu điểm của việc sử dụng BabelJS

Trong phần này, chúng ta sẽ tìm hiểu về những ưu điểm khác nhau liên quan đến việc sử dụng BabelJS -

BabelJS cung cấp khả năng tương thích ngược với tất cả các tính năng mới được thêm vào JavaScript và có thể được sử dụng trong mọi trình duyệt.
BabelJS có khả năng chuyển đổi để lấy phiên bản JavaScript sắp ra mắt tiếp theo - ES6, ES7, ESNext, v.v.
BabelJS có thể được sử dụng cùng với gulp, webpack, flow, react, stylescript, v.v. làm cho nó rất mạnh mẽ và có thể được sử dụng với các dự án lớn giúp cuộc sống của nhà phát triển trở nên dễ dàng.
BabelJS cũng hoạt động cùng với cú pháp react JSX và có thể được biên dịch ở dạng JSX.
BabelJS có hỗ trợ các plugin, polyfills, babel-cli giúp bạn dễ dàng làm việc với các dự án lớn.

Nhược điểm của việc sử dụng BabelJS

Trong phần này, chúng ta sẽ tìm hiểu về những nhược điểm khác nhau của việc sử dụng BabelJS -

Mã BabelJS thay đổi cú pháp trong khi chuyển ngữ, điều này làm cho mã khó hiểu khi được phát hành trên sản phẩm.
Mã được chuyển có kích thước lớn hơn khi so sánh với mã gốc.
Không phải tất cả ES6 / 7/8 hoặc các tính năng mới sắp tới đều có thể được chuyển đổi và chúng tôi phải sử dụng polyfill để nó hoạt động trên các trình duyệt cũ hơn.

Đây là trang web chính thức của babeljs https://babeljs.io/.