Tạo một ES6 NodeJS app

Lời mở

JavaScript, ngôn ngữ được ấp ủ đúng 10 ngày đã trở thành từ kỹ thuật được nhắc nhiều nhất bây giờ, phải cảm ơn cuộc cách mạng của Web 2.0.

JavaScript có mặt khắp mọi nơi, không chỉ ở client side khi bạn duyệt web, nó còn được dùng để phục vụ request ở server side với NodeJS. Bạn còn có thể tìm JS trên các ứng dụng embedded từ Arduino đến các ứng dụng desktop (vd Photoshop). Tôi có thể khẳng định là JS là ngôn ngữ fullstack từ hardware cho đến frontend mà mọi người ghét phải chấp nhận.

Tôi cũng không phải là fan cuồng JS, thực sự công việc bắt buộc phải đụng vào. Không như tôi tưởng tượng, làm việc với JS không quá khổ ải như trước nữa, với chuẩn ES6 và một số thư viện hỗ trợ, viết app với JS bây giờ khá là dễ chịu.

Trong bài viết này tôi sẽ chia sẻ cách tạo một app đơn giản viết với ES6, tôi sẽ sử dụng Babel để chuyển đổi (transpile) mã thành ES5 để cho nó tương thích bởi vì chuẩn này chưa được hoàn toàn hỗ trợ trong V8 engine (bản cũ từ 0.12.70 đổ ngược về).

Tạo một app mới

Bắt đầu với việc tạo một app mới, chúng ta tạo một thư mục tên demo và chuyển vào thư mục này:

mkdir demo && cd demo

Tiếp đến chung ta kiến tạo file package.json với lệnh

npm init

npm sẽ là trình quản lý gói của thế giới JS, nó tương tự như rubygems + bundler của thế giới Ruby. npm sẽ hỏi chúng ta hàng loạt câu hỏi, từ tên module này là gì, license, vv, xin trả lời app.js cho câu hỏi main file.

Sau khi hoàn thành bước trên, cơ bản là bạn có một module cở bản để làm việc trên.

Cài đặt gói babel

babel là gói phần mềm cho phép chuyển đổi mã ES6, JSX và nhiều thứ khác qua ES5 code. Kể từ bản 6.0, babel sẽ không kèm theo các gói ES2015 transformer nữa mà người dùng phải tự kèm vào, chúng ta sẽ cài toàn bộ các gói với lệnh:

npm install --save-dev babel babel-preset-es2015

sau khi chạy lệnh trên thì gói babel và babel-preset-es2015 sẽ xuất hiện trong phần "devDependencies": { của file package.json. Nếu chúng ta không khai báo cờ --save-dev thì 2 gói trên sẽ không đc nhúng vào file package.json của chúng ta. Có thể so sánh file package.json tương đương với file Gemfile và gemspec bên Ruby .

Vậy là chúng ta đã có babel để biên dịch mã ES6 qua ES5.

Viết ứng dụng Hello world

Tôi tạo một file src/app.js với nội dung như sau:

const fullName = "Lệ Nhơi";

console.log(`${fullName} chào quí bạn đọc`);

Có thể thấy ở trên tôi dùng ES6 const và string interpolation literal. Chúng ta sẽ chạy app với lệnh:

node src/app.js

và sẽ bị gặp lỗi vì các keyword của ES6 không đc hỗ trợ. Chúng ta có thể nâng cấp lên các phiển bản mới hơn của Node vd 4.2.1 (cái mà V8 mới và hỗ trợ ES6 natively). Nhưng trường hợp của bài viết này, tôi vẫn khuyên nên sử dụng babel cho tất cả, vì có nhiều feature của ES7 bạn có thể sử dụng cho dù V8 chưa hỗ trợ.

Chúng ta sẽ transpile file app.js thành mã của ES5. Chúng ta chạy lệnh

babel src/app.js --out-file dist/app-compiled.js

và chạy lại với:

node dist/app-compile.js

và sẽ thấy đc kết quả trả về:

Lệ Nhơi chào quí bạn đọc

Theo dõi và tự biên dịch file nguồn

Sẽ thực sự khá là bất tiện khi phải chạy babel mỗi lần chúng ta thay đổi nội dung, thật may là babel có cung cấp chế độ watcher, file sẽ đc theo dõi và nếu có thay đổi thì babel sẽ tự compile:

babel src/app.js --watch --out-file dist/app-compiled.js

mỗi lần thay đổi chúng ta sẽ thấy output sau:

change src/app.js

và file dist/app-compiled.js sẽ là kết quả biên dịch mới nhất.

Chúng ta có thể tự động hoá bước này một tí với npm, giới thiệu chức năng scripts của npm, chúng ta sẽ thêm vài đoạn sau vào package.json:

  "scripts": {
    "watch": "babel src/app.js --watch --out-file dist/app-compiled.js",
    "start": "node dist/app-compiled.js"
  },

sau đó chúng ta có thể chạy lệnh npm run watch để chạy chế độ watcher, và nếu muốn chạy app thì chỉ cần chạy npm start.

Bạn có thể đọc thêm về npm scripts hooks, khá là lợi hại. tôi sẽ không nói về chúng ở bài này.

Các chức năng khác

babel CLI còn cung cấp các cờ khác để biên dịch toàn bộ các file của một thư mục thông qua cờ

babel src --out-dir dist

và bạn còn có thể sử dụng một CLI rất tiện lợi là babel-node để kết hợp cả hai khâu biên dịch và chạy, tôi thường cài babel-cli ở chế độ global vì tôi hay scritpting với ES6. Bạn có thể cài với lệnh:

npm install -g babel-cli

và khi tạo một script bạn có thể chèn vào dòng shebang sau:

#!/usr/bin/env babel-node

// code ES6 của bạn ở đây

Kết luận

Đây chỉ là bề nổi của một JS app, còn rất nhiều thứ các bạn mới nhập môn nên mau chóng cập nhật về ES6, vd module loader, promise, generator, class, vv.

Tôi biết các bạn sẽ cảm thấy rối loạn khi mới nhập môn vì có quá nhiều modules và chỉ riêng client side JS là đủ chóng mặt, chưa tính server side. Đến với JS, kỹ năng các chuyên gia sẽ phải tích luỹ là vững căn bản và tự chọn một stack cho riêng mình để build app, nó sẽ mất nhiều thời gian, nhưng tôi tin rằng với kiên trì, quyết tâm, máu và nước mắt các bạn sẽ nâng lên mức tự tin khi xử lý với JS.

Chúc các bạn may mắn, tôi giờ phải quay về thế giới Ruby. Tạm biệt