ทำ Live Reload ด้วย Nodemon

Nodemon คือเครื่องมือที่ช่วย Restart node server ให้เราโดยอัตโนมัติเมื่อมีการเปลี่ยนแปลง Code และที่สำคัญเลยคือ Nodemon เป็น Open-source ที่สามารถนำมาใช้งานได้ฟรีโดยไม่มีค่าใช้จ่าย

ถ้าเราใช้งาน Node.js สิ่งที่เราต้องทำเมื่อมีการแก้ไข Code ใหม่คือ Stop และ Start server ใหม่ทุกครั้ง ซึ่งถ้าเราใช้ Nodemon เข้ามาช่วยเราไม่ต้องมานั่ง Stop และ Start server เลย Nodemon จะทำการ update หน้า Web ให้เราทุกครั้งที่เราแก้ไข Code โดยอัตโนมัติ

Features ของ Nodemon

Nodemon มี Features ต่างๆ ดังนี้

• Restart application ให้เราโดยอัตโนมัติ
• เลือกไฟล์ที่จะ Monitor โดยอัตโนมัติ
• นอกจาก Node.js แล้วยังสามารถนำไปใช้กับ Python, Ruby และ make ได้ด้วย
• สามารถเลือก Ignore บางไฟล์ได้(ถ้าแก้ไข Ignore file และ folder แล้วไม่ต้อง Restart)
• เลือก Watch แค่บาง folder ก็ได้
• สามารถเขียน script เข้าไปเพิ่มได้
• ทำงานกับ Console ที่เป็น REPL ได้

ขั้นตอนการใช้งาน Nodemon

1. ติดตั้ง Nodemon

   $ npm install --save-dev nodemon
   

2. Run nodemon โดยใช้ npx

   $ npx nodemon src/app.js
   

3. หลังจากนี้ Node.js จะถูก restart ทันทีที่มีการ Save file

การใช้งาน Nodemon

นอกจากการใช้งาน Nodemon แบบในตัวอย่างแรกแล้วเรายังสามารถกำหนด arguments ต่างๆให้กับ Nodemon ได้แบบนี้

กำหนด Host และ Port

เราสามารถบอก Nodemon ให้ Start Server ขึ้นมาโดยที่เราจะกำหนด Host และ Port ให้แบบนี้

$ nodemon src/app.js localhost 8080

ในตัวอย่างนี้ Nodemon จะ Start Local Server ขึ้นมาที่ Port 8080

ตรวจสอบหา Error

เราสามารถค้นหา Error ได้ด้วย --inspect แบบนี้

$ nodemon --inspect app.js

การใส่ --inspect เข้าไปจะทำให้เราเห็นรายละเอียดใน Console มากขึ้น

ระบุนามสกุลที่เราสนใจ

เราสามารถกำหนดนามสกุลของไฟล์ที่เราต้องการ Watch ไว้ได้ด้วยคำสั่ง

$ nodemon -ext js,ts

ตอนนี้ Nodemon จะสนใจแค่ ไฟล์ที่มีนามสกุล .js หรือ .ts เท่านั้น

Ignore บาง Folder

เราสามารถบอก Nodemon ได้ว่า Folder ไหนที่เราไม่สนใจ(การแก้ไขไฟล์ใน Folder นี้จะไม่มีการ restart)

$ nodemon --ignore lib/ --ignore tests/

ในตัวอย่างนี้ Nodemon จะไม่สนใจการเปลี่ยนแปลงของไฟล์ใน Folder lib และ tests หรือจะ Ignore เฉพาะไฟล์ JavaScript แบบนี้ก็ได้

$ nodemon --ignore 'tests/*.test.js'

Nodemon Configuration File

การกำหนด Arguments เข้าไปใน Command อาจไม่ค่อยสะดวกเท่าไหร่ในการทำงานจริง ดังนั้นเราเลยจะกำหนด Arguments ต่างๆไว้ใน Configuration file ชื่อ nodemon.json แบบนี้

{
  "watch": [
    "src"
  ],
  "ext": "js",
  "ignore": [
    "tests/*.test.js"
  ]
}

ในตัวอย่าง nodemon.json นี้จะเป็นการนำ Arguments ต่างๆที่อยู่ในตัวอย่างก่อนหน้าย้ายเข้ามาไว้ใน nodemon.json ซึ่งเราจะวางไว้ใน root ของ project ที่เดียวกับ package.json

ถ้าเราไม่ต้องการสร้างไฟล์ nodemon.js ขึ้นมาใหม่เราสามารถย้าย configuration ของ nodemon ไปวางไว้ใน package.json ได้โดยระบุ key เป็น nodemonConfig แบบนี้

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

{
  "name": "nodemon-example",
  "version": "1.0.0",
  "description": "",
  "nodemonConfig": {
    "watch": [
      "src"
    ],
    "ext": "js",
    "ignore": [
        "tests/*.test.js"
    ]
  },
  ...
}

หลังจากนี้เราก็ไม่ต้องมานั่งกำหนด Configuration ให้วุ่นวาย เราจะ run แค่ nodemon เพียงเท่านี้

$ nodemon app.js

การใช้ Watch ใน Node.js

นอกจากการใช้งาน Nodemon แล้วเรายังสามารถใช้ --watch แทนการใช้ Nodemon ก็ได้

Watch ใน Node.js สามารถใช้ได้ตั้งแต่ Node.js version 18.11 ขึ้นไปเท่านั้น

เราสามารถระบุไฟล์ Javascript ที่ต้องการ Watch ได้ด้วยคำสั่ง

1

$ node --watch index.js

ถ้าเราต้องการ Watch ทั่ง Folder เราต้องใช้คำสั่ง

1

$ node --watch-path=.src index.js

เรายังต้องใส่ index.js เพื่อระบุจุดเริ่มต้นของ Application

ถ้าต้องการให้ Watch มากกว่า 1 folder เราก็สามารถระบุ Watch-path ลงไปซ้ำๆกันได้เลย

1
2

$ node --watch-path=./src \
       --watch-path=./test index.js

ในทุกๆครั้งที่มีการ restart Node จะ clear หน้า output ออกทั้งหมด(เราจะมองไม่เห็น output ก่อนหน้า) ซึ่งถ้าใครไม่ชอบก็สามารถระบุ --watch-preserve-output เข้าไปเพื่อให้ไม่ต้อง Clear หน้าจอทุกครั้งที่ restart แบบนี้

1
2
3

$ node --watch-path=.src \
       --watch-path=./test \
       --watch-preserve-output index.js

ณ ตอนนี้ Watch ของ Node.js จะยังไม่สามารถทำงานกับ Typescript ได้