Hướng dẫn setup babel nodejs - thiết lập babel nodejs

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é.thuần Javascript nhé.

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

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

1. Babel là gì và tại sao cần babel?
2. Cài đặt các gói thư viện & plugins cần thiết
3. Code 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? 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” 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.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: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.) 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. 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. (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 { trungquandev } from '../../../../../../../../trungquandev.js'

// Absolute import sau khi đã được xử lý
import { trungquandev } from '@src/module/trungquandev.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?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 modulecreate-react-appnổ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 là 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é: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 là 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é:, 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é:

Awesome MERN Stack course, code ứng dụng Trello kéo thả công việc:, 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 trungquandev, 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 DMCA nhé.)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 trungquandev, 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 DMCA nhé.)

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://trungquandev.com/series-lap-trinh-nodejs/
https://trungquandev.com/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: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: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

• express:Web Framework huyền thoại cho Node.js rồi nên mình không cần giải thích nhiều nhé.
  Web Framework huyền thoại cho Node.js rồi nên mình không cần giải thích nhiều nhé.
• nodemon:Sử dụng để tự khởi động lại server node mỗi khi chúng ta update code, dùng để dev.
  Sử dụng để tự khởi động lại server node mỗi khi chúng ta update code, dùng để dev.
• @babel/core:Gói core cơ bản của Babel, dùng để chạy bất kỳ các thiết lập / cấu hình của babel.
  Gói core cơ bản của Babel, dùng để chạy bất kỳ các thiết lập / cấu hình của babel.
• @babel/cli:Sử dụng để biên dịch các files từ dòng lệnh.
  Sử dụng để biên dịch các files từ dòng lệnh.
• @babel/node:Là một CLI tương tự Node CLI, sử dụng để biên dịch tương thích với các cài đặt của Babel Preset và Babel Plugins
  Là một CLI tương tự Node CLI, sử dụng để biên dịch tương thích với các cài đặt của Babel Preset và Babel Plugins
• @babel/preset-env:Thằng này khá là hay, nó là một smart preset tự động sử dụng phiên bản Javascript mới nhất mà không cần khai báo cụ thể từng phiên bản một. Nói chung nó giúp cho cuộc sống dev của chúng ta dễ dàng hơn rất nhiều =))
  Thằng này khá là hay, nó là một smart preset tự động sử dụng phiên bản Javascript mới nhất mà không cần khai báo cụ thể từng phiên bản một. Nói chung nó giúp cho cuộc sống dev của chúng ta dễ dàng hơn rất nhiều =))
• @babel/plugin-transform-runtime:Plugin này cho phép babel tái sử dụng lại code của chính nó để giảm kích thước code.
  Plugin này cho phép babel tái sử dụng lại code của chính nó để giảm kích thước code.
• @babel/runtime:Theo như tài liệu chính thức của Babel thì gói này nên được install ở dependencies thay vì devDependencies vì nó sẽ phụ thuộc vào code sau khi đã triển khai xong. Tác dụng của nó là để tái sử dụng lại code hay cũng có thể hiểu là để tránh trùng lặp code sau khi đã build xong hết code ở production, bởi vì đôi khi Babel sẽ biên dịch ra các mã code giống nhau giữa các files.
  Theo như tài liệu chính thức của Babel thì gói này nên được install ở dependencies thay vì devDependencies vì nó sẽ phụ thuộc vào code sau khi đã triển khai xong. Tác dụng của nó là để tái sử dụng lại code hay cũng có thể hiểu là để tránh trùng lặp code sau khi đã build xong hết code ở production, bởi vì đôi khi Babel sẽ biên dịch ra các mã code giống nhau giữa các files.

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: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.jssrc/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 trungquandev.com's author.
 */
import express from 'express'

const app = express()

const hostname = 'localhost'
const port = 8017

app.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) 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: 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"
  },
...

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:, 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. 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. 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. Kết hợp của 2 lệnh trên.
• npm run production: Build xong code thì chạy ứng dụng. Build xong code thì chạy ứng dụng.
• npm run dev: Sử dụng nodemon và babel để biên dịch code và chạy ứng dụng cho quá trình dev. Sử dụng nodemon và 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é: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.

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: trungquandev ”
“ From author: trungquandev ”

Khóa học lập trình làm việc thực tế: