เนื้อหาต่อไปนี้ จะเป็นแนวทางการใช้งาน
lite-server หรือ การจำลอง server ขนาดเล็ก สำหรับใช้
ในการพัฒนา Web Application ในรูปแบบ Single Page App
ซึ่งส่วนใหญ่ก็จะเป็นการใช้งาน JavaScript กับ HTML
เหมาะสำหรับใช้ทดสอบโค้ด โดยความสามารถหลักๆ ก็คือเราสามารถ
ดูพรีวิวการทำงานได้ทันที เมื่อมีการอัพเดทโค้ด โดยไม่ต้องคอยกดรีเฟรช
ที่หน้าบราวเซอร์ ถ้านำไปใช้ในการออกแบบ UI หรือการใช้งาน css จัดรูปแบบ
หน้าตา Web App ก็จะสามารถดูผลลัพธ์ได้ทันที
สมมติเรามีโปรเจ็คที่จะเขียนโคัดที่ใช้งาน JavaScript HTML และ CSS เป็นหลัก ในที่นี้เรากำหนด
โฟลเดอร์โปรเจ็คไว้ที่ C: > projects > webdev
เปิดโฟลเดอร์โปรเจ็คใน VSCode ไปยังโฟลเดอร์ที่เราต้องการใช้งาน
ติดตั้ง lite-server
เราจะทำการติดตั้ง server ขนาดเล็ก สำหรับใช้ในการพัฒนา Web App โดยเริ่มต้นให้เราใช้งานคำสั่ง
npm init -y
ผ่าน command line จากโฟลเดอร์โปรเจ็คของเรา โดยคำสั่งนี้ จะเป็นการกำหนดค่าเริ่มต้นของโปรเจ็ค โดยค่า -y เป็น
การระบุว่าให้ใช้ที่เป็นค่าเริ่มต้นหลัก ในทุกๆ parameter
หลังจากรันคำสั่ง เราจะได้ไฟล์ package.json ตามรูปแบบดังรูป
ให้เราแก้ไขส่วนของคำสั่งการเรียกใช้งาน ตรง
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
เป็นคำสั่งสำหรับเรียกใช้ lite-server ซึ่งตอนนี้เรายังไม่ได้ติดตั้ง ดังนี้
"scripts": { "start": "lite-server"},
บันทึกการแก้ไขไฟล์ package.json
ต่อไปทำการติดตั้ง lite-server ด้วยคำสั่ง
npm install --save-dev lite-server
ผ่านการใช้งาน command line
รอสักครู่ ตัว npm จะทำการดาวน์โหลด package มาใช้งานในโปรเจ็คของเรา
หลังจากติดตั้ง เรียบร้อยแล้ว ตัวไฟล์ package.json จะเพิ่มส่วนของ devDependencies เข้ามา
เนื่องจากเราติดตั้งโดยไม่ระบุเวอร์ชั่น จึงเป็นเวอร์ชั่นล่าสุด ณ ขณะติดตั้ง หากมีเวอร์ชั่นใหม่ ค่า ^2.5.4 จะเปลี่ยน
ไปตามเวอร์ชั่น ณ เวลานั้น
"devDependencies": {
"lite-server": "^2.5.4"
}
ตอนนี้โปรเจ็คของเรา จะมีโฟลเดอร์ mode_modules ที่รวม package ต่างๆ ที่เราติดตั้งและใช้งานในโปรเจ็ค มีไฟล์
package-lock.json เก็บรายละเอียด package ที่เราได้ติดตั้ง และที่จำเป็นหรือมีการเรียกใช้งานเพิ่มเติม และก็ไฟล์ package.json
ทีเราได้อธิบายไปแล้ว
การใช้งาน lite-server
ต่อไปเราจะทดสอบการใช้งาน lite-server โดยให้เราสร้างไฟล์ index.html ในโฟลเดอร์โปรเจ็คของเรา โดยกำหนดรูปแบบ
โค้ดอย่างง่ายดังนี้
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
เสร็จแล้ว เรียกใช้คำสั่ง ที่เรากำหนดในไฟล์ package.json ที่ผ่านมา ผ่าน command line ดังนี้
npm start
ตามรูปแบบดังรูปด้านล่าง
หากไม่มีอะไรผิดพลาด ตัว server จะเริ่มทำงาน และเรียกเปิดบราวเซอร์ ไปยัง http://localhost:3000/
และแสดงข้อมูล Web App จากไฟล์ index.html ตามรูปแบบโครงสร้างโค้ดที่เรากำหนด ดังรูป
ทันทีที่เราแก้ไขโค้ด แล้ว save สมมติเราแก้ไข h1 เป็นสีแดง ตัว server ก็จะทำการอัพเดท และเรียกข้อมูลใหม่ โดย
ส่วนของ h1 เป็นสีแดงดังรูป โดยที่เราไม่ต้องไปกดรีเฟรชหรือโหลดหน้านั้นใหม่ด้วยตัวเอง ทำให้การพัฒนา Web App
หรือ Demo App อย่างง่ายทำได้รวดเร็ว และสะดวกยิ่งขึ้น
เข้าใจอย่างง่ายคือ ตัวบราวเซอร์จะทำการ sync ข้อมูลอัตโนมัติ ซึ่งในการทำงานนี้ ตัวหน้าต่าง terminal หรือ command
line ที่เรียกใช้งาน npm start ก็จะต้องเปิดค้างไว้ เพื่อทำงาน sync ข้อมูล หากต้องการปิดการใช้งาน หรือยกเลิกการใช้งาน
lite-server ก็ให้กด CTRL+C และกด y เพื่อออกไปรับคำสั่งใหม่
การปรับแต่ง lite-server
เราสามารถกำหนดค่า การใช้งาน lite-server เช่น กำหนด port ที่จะใช้งาน ซึ่งค่าเริ่มต้นจะเป็น 3000 เราอาจจะอยากเปลี่ยนเป็น
3456 หรือ 4040 ก็ได้ หรือจะต้องการจะทดสอบโค้ดที่อยู่ในโฟลเดอร์ test แทน root ก็สามารถทำได้เหมือนกัน โดยสามารถทำได้
ดังนี้
ให้เราสร้างไฟล์ชื่อ bs-config.json ไว้ใน root ของโปรเจ็คที่เดียวกับ package.json จากนั้นกำหนดค่าที่ต้องการปรับแต่ง เช่น
ต้องการกำหนด port เป็น 4040 ก็จะได้ไฟล์ bs-config.json เป็นดังนี้
{
"port": 4040
}
ทดสอบเรียกใช้งาน npm start ก็จะได้เป็น
ต่อไปเราลองสร้างโฟลเดอร์ test และเรียกใช้งานจากโฟลเดอร์นี้แทน root โดยกำหนดในไฟล์ bs-config.json ดังนี้
{
"port": 4040,
"server": {
"baseDir": "./test"
}
}
สร้างโฟลเดอร์ test และสร้างไฟล์ index.html ด้านในประมาณดังรูปด้านล่าง
ทดสอบเรียกใช้งานผ่าน npm start อีกครั้ง
จะเห็นว่าจะเป็นการเรียกใช้งาน หรือ sync ข้อมูลจากโฟลเดอร์ test ตามที่เรากำหนดในไฟล์ bs-config.json
ดูรายละเอียดและข้อมูลเพิ่มเติม เกี่ยวกับ lite-server package คลิก
