BABEL LÀ GÌ

  -  
Xin chào tất cả các bạn, mình là Quân, hôm nay chúng ta sẽ cùng nhau đi cấu hình Babel cũng như viết các lệnh scripts “run dev”, “run production” cho một dự án NodeJS thuần Javascript nhé.

Bạn đang xem: Babel là gì

“Bài này nằm trong loạt bàiLập Trình NodeJS từ cơ bản đến nâng cao trên trang blog chính thức ceds.edu.vn“

Những nội dung có trong bài:

Babel là gì và tại sao cần babel?Cài đặt các gói thư viện & plugins cần thiếtCode Hello world & viết các lệnh scripts để chạy ứng dụng

1. Babel là gì và tại sao cần babel?

Lý thuyết thì đơn giản, nếu các bạn thử gõ “babel” trên google, các bạn có thể thấy ngay kết quả từ wikipedia:

“Babel là một trình biên dịch Javascript mã nguồn mở và miễn phí có chức năng chính dùng để biên dịch ECMAScript thành phiên bản tương thích ngược cho JavaScript có thể chạy trên các môi trường JavaScript cũ hơn. Babel là công cụ phổ biến để sử dụng các tính năng mới nhất của Javascript.”

Còn đây là từ phía trang chủ của babel:

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

Mình tạm dịch:

Babel là một bộ công cụ lập trình được sử dụng chủ yếu để chuyển đổi mã Javascript ECMAScript từ đời 2015 trở lên thành các mã Javascript đời thấp hơn để có thể tương thích ngược với các trình duyệt, môi trường hiện tại hoặc cũ hơn.

Tóm gọn lại: Babel là một trình biên dịch mãJavascript.

Từ mớ lý thuyết ở trên thì chắc hẳn các bạn cũng hiểu phần nào về tác dụng của babel rồi đúng không, tiếp theo chúng ta sẽ phân tích sâu hơn về lý do mà chúng ta cần nó, khiến nó trở nên nổi tiếng tới tận ngày hôm nay cụ thể là lượt dowload hàng tuần của babel lên tới tận gần 28 triệu tính tới thời điểm hiện tại mình viết bài này. Các bạn có thể xem tại đây:

https://www.npmjs.com/package/
babel/core

Lý do đầu tiên: Ngày trước khi mà Node.js còn chưa phát triển tới version 12, nếu các bạn muốn sử dụng những tính năng của Javascript ES6 trở lên như arrow function, import – export, async – await…vv thì bắt buộc bạn phải dùng một trình biên dịch mã về đời Javascript thấp hơn thì ứng dụng mới có thể chạy được. Và vì thế babel đã nổi lên như một lựa chọn không thể thiếu đối với một ứng dụng code trên platform Node.js, và nó vẫn nổi cho tới tận bây giờ, có thể cả tương lai nữa (Mình dùng từ “có thể” bởi không điều gì là chắc chắn cả, đặc biệt là trong ngành công nghệ khi mọi thứ thay đổi liên tục hàng ngày.)

Lý do thứ hai mà mình vẫn quyết định lựa chọn Babel mặc dù Node.js từ phiên bản 12.0.0 trở lên đã support hầu hết các tính năng mới của Javascript ES6 trở lên, (cụ thể hiện tại Node.js đã phát triển tới version 16.0.0, các bạn có thể xem version của Node tại đây: https://nodejs.org/en/ ) nhưng vẫn có những thứ mà mình cảm thấy chưa hoàn hảo.

Ví dụ như việc xử lý import các đường dẫn tương đối (relative path) thành các đường dẫn tuyệt đối (absolute path), mình đã thử khá nhiều cách như dùng alias, symlink, global variable, modules, environtment hoặc start-up script…vv đều không thể giải quyết được.

Giải thích nhanh cho bạn nào chưa biết về relative import với absolute import nhé, mình có 2 câu lệnh import như sau:

// Relative import theo mặc định sẽ trông như thế này
_
import { ceds.edu.vn } from "../../../../../../../../ceds.edu.vn.js"https:// Absolute import sau khi đã được xử lýimport { ceds.edu.vn } from "
src/module/ceds.edu.vn.js"Chỉ cần nhìn vậy thôi là đủ để hiểu chúng ta cần Absolute Import cho con đường phát triển Clean Code là như thế nào rồi phải không?

Từ những lý do trên nên mình vẫn dành trọn tình yêu đối với Babel mỗi khi mình start một dự án Node.js mới. Và Babel cũng không chỉ giới hạn ở Node.js đâu nhé, nếu bạn nào từng để ý, thì đơn cử như gói module create-react-app nổi tiếng của facebook, lúc các bạn tạo xong một project React sẽ thấy bên trong file package.json nó có một dependency react-scripts, bên trong gói này lại tiếp tục có các dependencies thuộc về Babel. Không tin thì các bạn có thể kiểm tra tại đây nhé:

https://github.com/gaearon/react-hot-loader/blob/master/package.json

Từ phía kinh nghiệm của mình, mình đã từng dùng Babel cho nhiều dự án từ cả ở công ty lẫn những dự án cá nhân ví dụ như 2 khoá học chất lượng này, các bạn có thể tham khảo qua nhé:


Node.js & MongoDB – Xây dựng một ứng dụng Messenger trò chuyện trực tuyến.

Awesome MERN Stack course, code ứng dụng Trello kéo thả công việc:

*

(Ngoài lề quen thuộc: Cảnh báo này dành cho bất kể trang nào khác mà có ý định copy bài không phải của các bạn thì hãy tôn trọng người viết bài chân chính,tuyệt đối không được xào nấu, chỉnh sửa linh tinh bài viết của mình cụ thể là không được xóa những liên kết (link) cũng như tự ý xóa các câu thoại của mình trong toàn bộ bài viết rồi post lại lên trang của các bạn như kiểu đây là bài của các bạn vậy, nếu tham khảo thì hãy để lại liên kết nguồn rõ ràng từ trang ceds.edu.vn, mình sẽ thường xuyên dùng tool để check, và nếu phát hiện ra thì cứđơn giản làchắc chắn sẽ ăn report DMCAnhé.)

2. Cài đặt các gói thư viện và Plugins cần thiết

Đầu tiên chúng ta sẽ đi khởi tạo ứng dụng Node.js, việc này thì mình không làm lại, các bạn có thể xem cách làm ở các bài viết trước của mình tại link bên dưới đây:https://ceds.edu.vn/series-lap-trinh-nodejs/

Tiếp theo, trong ví dụ ngày hôm nay, chúng ta sẽ cài đặt những module sau:

Framework express để viết api và nodemon để tự động khởi động lại server node mỗi khi code thay đổi:

npm install --save express

npm install --save-dev nodemon

Tiếp theo là những gói module cần thiết để cài đặt Babel cho dự án:

npm install --save-dev
babel/core
babel/cli
babel/node
babel/preset-env
babel/plugin-transform-runtime

npm install --save
babel/runtime

Sau khi cài xong hết các gói trên thì file package.json của bạn sẽ có các dependencies trông như thế này:

... "dependencies": { "express": "^4.17.1" }, "devDependencies": { "
babel/cli": "^7.13.16", "
babel/core": "^7.13.16", "
babel/node": "^7.13.13", "
babel/plugin-transform-runtime": "^7.13.15", "
babel/preset-env": "^7.13.15", "
babel/runtime": "^7.13.17", "babel-plugin-module-resolver": "^4.1.0", "nodemon": "^2.0.7" }...

3. Code Hello world & viết các lệnh scripts để chạy ứng dụng

Sau khi đã cài đặt xong các gói trên, các bạn viết cho mình một file src/server.js đơn giản với chức năng là hiển thị ra màn hình dòng chữ Hello World huyền thoại. Lưu ý với phiên bản Node.js từ 12.0.0 trở lên, để code bên dưới chạy được cụ thể là cú pháp import, các bạn cần khai báo type: “module” trong file package.json nhé. Tham khảo thêm ở đây: Hướng dẫn sử dụng ES Module, cú pháp import, export trong Node.js

/** * Created by ceds.edu.vn"s author. */import express from "express"const app = express()const hostname = "localhost"const port = 8017app.get("/", (req, res) => { res.end("Hello World!")})app.listen(port, hostname, () => { console.log(`Hello Trung Quan Dev, I am running at ${ hostname }:${ port }/`)})Một file .babelrc nữa nằm ở ngoài cùng của dự án (cùng cấp với thư mục src)

{ "presets": <"
babel/preset-env">, "plugins": < <"
babel/plugin-transform-runtime"> >}Tiếp theo trong file package.json, chúng ta sẽ viết tiếp những câu lệnh scripts như sau:

... "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "clean": "rm -rf build && mkdir build", "build-babel": "babel ./src -d ./build/src", "build": "npm run clean && npm run build-babel", "production": "npm run build && node ./build/src/server.js", "dev": "nodemon --exec ./node_modules/.bin/babel-node ./src/server.js" },...

Xem thêm: Link Tải Quyền Vương 98 Trung Quốc Việt Hóa, Tải Game Quyền Vương 98 Trung Quốc

Cuối cùng ở Terminal, các bạn có thể chạy những lệnh script ở trên và kiểm tra kết quả nhé, mình sẽ giải thích các lệnh trên và thêm một vài ảnh ví dụ như sau:

npm run clean: Làm sạch bằng cách xoá thư mục build hiện tại và tạo ra một thư mục build rỗng mới.npm run build-babel: Biên dịch toàn bộ code trong thư mục src sang thư mục build/src để code tương thích với các trình duyệt cũ hoặc môi trường cũ hơn.npm run build: Kết hợp của 2 lệnh trên.npm run production: Build xong code thì chạy ứng dụng.npm run dev: Sử dụng nodemon babel để biên dịch code và chạy ứng dụng cho quá trình dev.

Test thử nhé, sau khi mình chạy npm run build thì file server.js trong thư mục build/src/server.js sẽ trông như thế này, mình chụp cái ảnh cho trực quan nhé:

*

Ok nội dung bài hôm nay xong rồi nhé, nếu có vấn đề gì thắc mắc hoặc gặp lỗi trong quá trình triển khai thì các bạn comment bên dưới bài viết, mình sẽ kiểm tra nhé.

Cảm ơn các bạn đã dành thời gian đọc bài viết.

Xem thêm: Cực Phẩm Tu Chân Thiếu Niên, Cực Phẩm Tu Chân Cường Thiếu

Xin chào và hẹn gặp lại các bạn ở những bài viết tiếp theo.

Best Regards – Trung Quân – Green Cat

Tham khảo kiến thức:

https://babeljs.io/docs/en/

“Thanks for awesome knowledges.”“ From author: ceds.edu.vn


Khóa học lập trình làm việc thực tế:
Nếu các bạn thấy bài viết của mình có ích thì hãy ủng hộ mình bằng cách tham khảo bài viết giới thiệu khóa học lập trình MERN Stack Miễn Phí cực kỳ chất lượng và chính chủ dưới đây của mình nhé, cảm ơn các bạn ^^KHOÁ HỌC LẬP TRÌNH MERN STACK 100% DỰ ÁN THỰC TẾ và CHẤT LƯỢNG
*