Xin kính chào các bạn, Hôm nay tôi sẽ nói đến “ Babel ”, một giữa những chủ thể rét tuyệt nhất vào sảnh chơi front-end-dev. Babel là một Javascript transpiler rằng cách tân JavaScript (ES6) vào đồng bởi ES5 Javascript cũ nhưng mà hoàn toàn có thể chạy trong ngẫu nhiên trình chú ý trong cả Một trong những mẫu cũ.

Bạn đang xem: Babel là gì và sử dụng babel như thế nào

Trình biến đổi là gì?

Transpilers , hoặc trình biên dịch trường đoản cú nguồn lịch sự nguồn , là cách thức đọc mã mối cung cấp được viết bằng một ngữ điệu thiết kế cùng tạo nên mã tương tự bằng một ngữ điệu không giống ngơi nghỉ cùng Lever.

Chuyển đoạn kế tiếp là gì?

Nó là 1 trong những quy trình sử dụng một ngôn từ và thay đổi nó sang ngôn ngữ khác hệt như chúng ta gửi bảng vần âm của chính mình thành javascript cùng sass thành css.

Sự khác hoàn toàn giữa biên dịch với chuyển dời là gì?

Biên dịch chuyển đổi ngữ điệu này sang trọng ngôn từ khác ở mức trừu tượng rẻ hơn hẳn như là java thành mã byte vào khi dịch đưa biến đổi ngữ điệu này quý phái ngữ điệu khác ngơi nghỉ cùng mức trừu tượng nhỏng typecript thành javascript hoặc sass thành css.

Lý vị sử dụng babel là gì?

Tất cả những kỹ năng javascript tiên tiến nhất vẫn không được cung cấp vào hầu hết trình chăm chú. Vì vậy, ai đó rất cần phải làm cho phần biến hóa buộc phải không? Vì vậy, babel tại đây để đưa các tác dụng javascript tiên tiến nhất (những kĩ năng của ES6) nhưng mà không phải trình ưng chuẩn nào thì cũng hoàn toàn có thể phát âm được sang trọng ES5, điều này rất có thể hiểu được đối với phần nhiều trình để mắt.

Bắt đầu

Babel được gói gọn bên dưới dạng một mô-đun nút. Cài đặt hoàn toàn có thể được tiến hành thông qua npm.

Các bước:

01. trước tiên họ đề xuất thiết đặt babel-cli quanpm install –g babel-cli

02. tạo nên một tlỗi mục dự án công trình vị trí bạn muốn chất vấn hoạt động của babel. Tôi bao gồm chiếc của mình chọn cái tên là “babel-example”

03. Ttốt đổi tlỗi mục thành “Babel-example”

04. Thiết lập package.json bằng phương pháp thực thi npm init -y


*
package.json ban sơ

05. Thêm babel vào package.json của khách hàng bằng cách thực thinpm install –-save-dev babel-cli babel-preset-es2015


*
package.json sau thời điểm cài đặt chấm dứt babel

Lưu ý: có nghĩa là Shop chúng tôi sẽ cài đặt những phần phụ thuộc này chỉ mang lại mục đích cải tiến và phát triển cùng chúng tôi không muốn nó trong cấp dưỡng. Babel-preset-esnăm ngoái là một trong những loạt các plugin chất nhận được babel gửi mã ES2015. Nó bao gồm tương đối nhiều plugin nhỏng plugin cho công dụng mũi thương hiệu, những lớp với nhiều hơn thế nữa nữa !!!–-save-dev

06. Tạo tệp .babelrc vào thư mục nơi bắt đầu của công ty.

Xem thêm: Download Windows 8 And Windows 8, Windows 8 And Windows 8

Lưu ý: Tệp này cho babel biết cách bọn họ mong mỏi mã của chính bản thân mình truyền cài. Nó đựng một json bình thường. Hai nằm trong tính đặc biệt là pluginthiết lập trước . Nếu chúng ta chỉ muốn babel truyền cài đặt những anh tài rõ ràng, bạn cũng có thể chỉ định và hướng dẫn chúng bởi ở trong tính plugin vị có các plugin lẻ tẻ nhỏng hàm mũi thương hiệu, các lớp, instanceof , v.v.nhiều hơn nữa . Nhưng xác minh plugin theo cách này chưa hẳn là 1 trong những ý tưởng tuyệt đối vày bạn muốn tất cả các hào kiệt của ES6 được thay đổi vậy vì chỉ định và hướng dẫn toàn bộ những plugin vào trực thuộc tính plugin babel có một đồ vật Điện thoại tư vấn là cài đặt trước . Có nhiều cài đặt trước. Một trong các chính là ESnăm ngoái. Các thiết lập trước chỉ là 1 tập hòa hợp các plugin babel đối chọi giản . Đó là nguyên nhân tại sao chúng tôi vẫn setup babel-preset-es2015 trong ví dụ của chúng tôi. Điều đó sẽ cho phép babel truyền tải tất cả những kĩ năng của ESnăm ngoái.


*
Tệp .babelrc

07. Mlàm việc tệp .babelrc với hướng đẫn thiết lập trước es2015 vào ở trong tính thiết lập trước của công ty chúng tôi sống kia.


*
.babelrc tệp sau esnăm ngoái được hướng dẫn và chỉ định

08. Tạo một thỏng mục thương hiệu là src trong tlỗi mục nơi bắt đầu của công ty chúng tôi và một tệp chạy thử.js bên phía trong nó. Đây là tệp mà họ đã viết những công dụng ESnăm ngoái của bản thân với chúng ta cũng có thể thấy babel vẫn chuyển nó, với việc trợ giúp của babel-preset-es2015. Tệp thử nghiệm.js của mình trông giống như sau:


*
src / demo.js

09. Bây giờ đồng hồ hãy thử dùng babel chuyển mã ES6 của bọn họ thành ES5 bằng cách xúc tiến babel src -d build

Lưu ý:src là khu vực tôi bao gồm src của tớ có mã ES6 và buildlà chỗ tôi mong mỏi coi mã ES5 mà Cửa Hàng chúng tôi bằng lòng Hotline nó là Đầu ra hoặc Bản dựng .

10. Sau Lúc chạy lệnh trên trong terminal, bạn sẽ thấy một thư mục chế tạo đã làm được sản xuất với tệp thử nghiệm.js bên trong nó sẽ viết cùng một câu chữ bởi ES5. Tệp kiểm tra.js của mình trông y như sau:


*
build / kiểm tra.js

Tất cả đang xong;) hiện nay chúng tôi vẫn đưa mã ES6 của chúng tôi thành ES5 bằng phương pháp thực hiện babel. Bây tiếng họ biết phương pháp hoạt động của babel. Một điều đặc biệt là tất cả các plugin đến webpachồng, gulp, grunt, v.v.

Xem thêm: Game Free Fire Là Gì - Tổng Hợp Các Thông Tin Về Free Fire

Đó là toàn bộ đến hiện giờ, Hy vọng bạn muốn hiểu. Hẹn gặp gỡ lại các bạn cùng với một trong những chủ đề nóng giãy không giống !!!!.

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *