ใช้งาน Node.js, Express.js, Nodemon และ Babel

ทำการติดตั้ง node และ npm

ติดตั้ง package.json

npm init -y

วิธีการติดตั้ง

• express (คือ web framework ที่ใช้กับ node js)
• nodemon (library สำหรับการทำ hot reload)
• babel (library สำหรับแปลงโค้ด javascript ใหม่ๆ ของ express ให้สามารถใช้ได้กับ node js เวอร์ชั่นเก่าๆ ได้)

โดยรันคำสั่งด้านล่าง

npm install --save nodemon express @babel/node @babel/cli @babel/core @babel/preset-env

สร้าง ไฟล์ .gitignore ที่ root directory เพื่อทำการ ignore ไฟล์ package.json และ node_modules/ โดยใส่ content ตาม

package.json
node_modules/

สร้าง directory ชื่อ server (อาจใช้เป็นชื่ออื่นก็ได้) แล้วภายใน directory ให้สร้างไฟล์ index.js จะได้โปรเจคตามโครงสร้างดังภาพด้านล่าง

ทดสอบการทำงานของ express และ node โดยเพิ่ม content ดังต่อไปนี้เข้าไปที่ index.js

const express = require('express') const app = express() app.listen(3000, () => { console.log("server started") })

ทดสอบการทำงานของ server โดยพิมพ์์คำสั่ง

node server/index.js

จะได้ผลลัพธ์ที่ console ตามภาพด้านล่าง

 server started

แต่หากระบบเกิด error เช่น

events.js:167
      throw er; // Unhandled 'error' event

ให้ทำการ kill node ที่อาจ run ไว้ก่อนหน้านี้โดยใช้คำสั่ง

killall node

ขั้นตอนถัดไปเราจะทำให้ server สามารถทำ hot reload ได้โดยใช้ nodemon โดยให้ไปที่ไฟล์ package.json และทำการแก้ไข script ตามภาพด้านล่าง

"scripts": { "dev": "nodemon server/index" }

สิ่งที่เกิดขึ้นตอนนี้คือเราสร้าง script ชื่อ dev ขึ้นมา โดยเมื่อ user ทำการ run script นี้โดยพิมพ์์คำสั่ง

npm run dev

ระบบจำทำการ run server โดย execute คำสั่ง nodemon server/index ซึ่งจะได้ผลลัพธ์เดียวกันกับการ run คำสั่ง node server/index.js แต่ระบบจะทำการ hot reload ให้โดยอัตโนมัติเมื่อมีการแก้ไขไฟล์

ณ จุดนี้เราจะสามารถเรียกใช้ nodemon เพื่อทำการ hot reload หน้า page ได้อย่างที่เราต้องการ แต่สิ่งหนึ่งที่เราต้องคำนึงถึงคือ javascript ที่เราใช้อยู่ในขณะนี้อาจยังไม่ support กับ node js เก่าๆ ดังนั้นเราจึงต้องนำ babel เข้ามาช่วยในการแปลง script

ให้เราทำการแก้ไข script ในไฟล์ package.json ตามภาพด้านล่าง

"scripts": { "dev": "nodemon --exec babel-node server/index" }

โดยเราจะให้ nodemon เรียกใช้ babel-node แทนการเรียกใช้คำสั่ง node โดยตรง ทั้งนี้เพื่อต้องการให้ระบบทำการแปลงโค้ด java-script ให้ใช้กับ node js ได้

นอกจากนี้สิ่งหนึ่งที่เราต้องทำเมื่อมีการเรียกใช้ babel ก็คืือการกำหนด preset เพื่อให้ babel รู้ว่าต้องแปลงโค้ดไปเป็น version อะไร โดยให้เราไปที่ root directory และสร้างไฟล์ .babelrc ซึ่งจะได้ project ตาม structure ด้านล่าง

ให้ทำการกำหนด preset ให้กับ babel โดยพิมพ์ content ดังต่อไปนี้ใส่เข้าไปใน .babelrc

{ "presets": [ "@babel/preset-env" ] }

และเมื่อเราทำการติดตั้ง babel เป็นที่เรียบร้อยแล้ว เราก็จะสามารถใช้คำสั่งใหม่ๆ ที่อาจจะไม่ support ใน node js เวอร์ชั่นเก่าได้ ยกตัวอย่างเช่นเราสามารถเรียกใช้คำสั่ง import แทนคำสั่ง require เดิมได้ โดยทดลองโดยไปที่ index.js และแก้ไขคำสั่ง

const express = require('express')

ให้เป็นคำสั่ง

import express from 'express'

จะได้ไฟล์ server/index.js ตามภาพด้านล่าง

import express from 'express' const app = express() app.listen(3000, () => { console.log("server started success") })

ทดสอบการทำงานโดย run คำสั่งด้านล่าง (เพื่อ execute ตัว script ตามที่เราระบุไว้ใน package.json)

npm run dev

ทดสอบด้วยตัวของคุณเอง

โดย ดาวน์โหลดไฟล์ และรันคำสั่ง

npm install

เพื่อทำการติดตั้ง library ต่างๆ และรันคำสั่ง

npm run dev

เพื่อทดสอบการทำงาน