Bài viết Babel Là Gì và dùng Babel Như Thế Nào thuộc chủ đề về Câu Hỏi Quanh Ta đang được rất nhiều bạn lưu tâm đúng không nào !! Hôm nay, Hãy cùng https://mangraovat.edu.vn/ tìm hiểu Babel Là Gì và dùng Babel Như Thế Nào trong bài viết hôm nay nha !
Các bạn đang xem nội dung về : “Babel Là Gì và dùng Babel Như Thế Nào”


Babel là công cụ thường được nói đến trong các bài hướng dẫn về ReactJS. Không ít lập trình viên trong quy trình học đã gặp phải điều kiện trong việc tiếp cận và 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 ra 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 thông tin về công cụ Babel và cách 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 đó.

Quảng Cáo

Đọ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?

Tìm Hiểu Babel Là Gì & Hướng Dẫn Sử Dụng Babel

Quảng Cáo

Đúng là JavaScript đã có sẵn các quy tắc để lập trình, mặc khác 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 kéo theo không những 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 khả năng code của bạn sẽ không chạy như ý muốn. vì thế chuẩn ECMAScript được ra đời để Giảm 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 ý: ngôn từ ECMAScript thường được viết tắt là ES.

Quảng Cáo

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 dùng thêm Babel nữa?

XEM NGAY:  Nhận xét về rùa trong game là gì

Tại Sao Cần dùng Babel

Như các bạn biết thời buổi ngày nay công nghệ thay đổi ngay 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 ngay 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 Giảm trong tiêu chuẩn ECMAScript đang dùng và đòi hỏi cần có sự thay đổi ngay 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 thường nhật 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 mặc khác lại mới chỉ được một vài 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 mong muốn 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à dùng Babel

Tuỳ theo mong muốn dùng chúng ta khả năng cài đặt Babel trực tiếp trên web browser hoặc thông qua Node Package Manager:

Cài Đặt và 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 dùng thư viện Babel đã được tinh giản (minified) từ CDN server:

<script src=”https://unpkg.com/[email protected]/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”; sentayho.com.vnlementById(‘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 khả năng hiểu được.

Cài Đặt và dùng Babel CLI

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.

XEM NGAY:  Tìm hiểu kịch là gì

Nếu so sánh với cách làm trước thì cách làm này sẽ giúp nâng cao hơn tốc độ chạy ứng dụng. mặt khác, việc dùng Babel trên browser cũng gặp một vài Giảm về tính năng hơn so với việc dùng Babel CLI.

Babel CLI khả năng đượ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 chi tiết:

$ npm install -save-dev babel-cli

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

$ ./node_modules/.bin/babel -version

Việc dùng Babel CLI trong phạm vi một dự án chi tiết được khuyên dùng do các dự án khác nhau khả năng dùng các phiên bản Babel CLI khác nhau và sẽ Giảm 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 dùng công cụ này ở dự án chi tiết 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.

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

mặc khác trên thực tế chúng ta hiếm khi dùng một plugin riêng lẻ, thay vào đó chúng ta 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 dùng Babel kèm theo bộ preset:

$ babel -presets [list]

Bây giờ chúng ta sẽ tìm hiểu cách 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 thường nhật là chuyển đổi từ ES6 về ES5.

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

const ES = “ECMAScript”; let ed = “6th”; sentayho.com.vn(ES + ” ” + ed + ” edition”)

Trước khi khả năng 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 khả năng 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 khả năng 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 sentayho.com.vn này về ES5:

$ babel -presets babel-preset-env sentayho.com.vn

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

“use strict”; var ES = “ECMAScript”; var ed = “6th”; sentayho.com.vn(ES + ” ” + ed + ” edition”);

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

XEM NGAY:  Nhạc lý cơ bản: Mách bạn cách tự học nhạc lý cơ bản kết quả

Để chuyển đổi cùng lúc ấy 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 sentayho.com.vn -o sentayho.com.vn

Kết thúc câu lệnh bạn sẽ thấy tập tin sentayho.com.vn đượ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 mặc khác 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 khả năng 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 thông tin về ES6 trong thời gian ngắn nhất khả năng.

Bạn thấy bài viết thế nào?

Các câu hỏi về Babel Là Gì và dùng Babel Như Thế Nào

Team Mạng Rao Vặt mà chi tiết là Thùy Dương đã biên soạn bài viết dựa trên tư liệu sẵn có và kiến thức từ Internet. Dĩ nhiên tụi mình biết có nhiều câu hỏi và nội dung chưa thỏa mãn được bắt buộc của các bạn.

Thế nhưng với tinh thần tiếp thu và nâng cao hơn, Mình luôn đón nhận tất cả các ý kiến khen chê từ các bạn & Quý đọc giả cho bài viêt Babel Là Gì và dùng Babel Như Thế Nào

Nếu có bắt kỳ câu hỏi thắc mắt nào vê Babel Là Gì và dùng Babel Như Thế Nào hãy cho chúng mình biết nha, mõi thắt mắt hay góp ý của các bạn sẽ giúp mình nâng cao hơn hơn trong các bài sau nha <3 Chốt lại nhen <3 Bài viết Babel Là Gì và dùng Babel Như Thế Nào ! được mình và team xem xét cũng như tổng hợp từ nhiều nguồn. Nếu thấy bài viết Babel Là Gì và dùng Babel Như Thế Nào Cực hay ! Hay thì hãy ủng hộ team Like hoặc share. Nếu thấy bài viết Babel Là Gì và dùng Babel Như Thế Nào rât hay ! chưa hay, hoặc cần bổ sung. Bạn góp ý giúp mình nha!!

Các Hình Ảnh Về Babel Là Gì và dùng Babel Như Thế Nào

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

Các từ khóa tìm kiếm cho bài viết #Babel #Là #Gì #và #Sử #Dụng #Babel #Như #Thế #Nào

Tìm thêm thông tin về Babel Là Gì và dùng Babel Như Thế Nào tại WikiPedia

Bạn nên tham khảo thêm thông tin về Babel Là Gì và dùng Babel Như Thế Nào từ trang Wikipedia tiếng Việt.◄

Tham Gia Cộng Đồng Tại

💝 Nguồn Tin tại: https://mangraovat.edu.vn

💝 Xem Thêm Giải Đáp Câu Hỏi tại : https://mangraovat.edu.vn/hoi-dap/