⏱️ ~10 นาที

Node.js & npm

รัน JavaScript ฝั่งเซิร์ฟเวอร์ และจัดการแพ็กเกจ

Node.js คืออะไร?

ตอนนี้คุณเขียน JS ในเบราว์เซอร์ (ฝั่ง Frontend) แต่ Node.js ทำให้เรารัน JS นอกเบราว์เซอร์ ได้ — คือฝั่ง Backend

นี่คือเหตุผลที่ JS เป็น Fullstack: ภาษาเดียว ใช้ได้ทั้งสองฝั่ง

💡 ถ้ายังไม่ได้ติดตั้ง กลับไปดูบท "ติดตั้งเครื่องมือ" ในพื้นฐาน ติดตั้งจาก https://nodejs.org

ตรวจสอบการติดตั้ง

node -v      # เช่น v20.x.x
npm -v       # เช่น 10.x.x

ถ้าเห็นเลขเวอร์ชัน แปลว่าพร้อมแล้ว

รันไฟล์ JS ด้วย Node

สร้างไฟล์ app.js:

console.log("รันบน Node.js!");

รันใน terminal:

node app.js

npm — ตลาดแพ็กเกจ

npm (Node Package Manager) คือระบบที่ให้เราใช้ โค้ดที่คนอื่นเขียนไว้แล้ว (เรียกว่า package/dependency) ไม่ต้องเขียนทุกอย่างเองจากศูนย์!

ตัวอย่างแพ็กเกจยอดนิยม:

  • express — สร้างเว็บเซิร์ฟเวอร์
  • lodash — ฟังก์ชันช่วยเหลือทั่วไป
  • axios — เรียก API

เริ่มโปรเจกต์ใหม่

mkdir my-app
cd my-app
npm init -y

คำสั่ง npm init -y สร้างไฟล์ package.json (แบบค่าเริ่มต้น) ไฟล์นี้เก็บ ข้อมูลโปรเจกต์ และ รายการแพ็กเกจที่ใช้

ติดตั้งแพ็กเกจ

npm install express
  • npm จะดาวน์โหลด express มาเก็บในโฟลเดอร์ node_modules/
  • บันทึกใน package.json ที่ส่วน dependencies
  • สร้าง package-lock.json (ล็อกเวอร์ชัน)

⚠️ อย่าเก็บโฟลเดอร์ node_modules/ ใน Git! เพิ่มใน .gitignore คนอื่นรับโค้ดไปแล้วรัน npm install ใหม่ได้

ใช้แพ็กเกจในโค้ด: require / import

// CommonJS (เก่า แต่ใช้ได้ทั่วไป)
const express = require("express");

// ES Modules (ใหม่)
import express from "express";

ลองทำจริง: สร้างเซิร์ฟเวอร์ง่าย ๆ

mkdir hello-server
cd hello-server
npm init -y
npm install express

สร้างไฟล์ index.js:

const express = require("express");
const app = express();

app.get("/", (req, res) => {
  res.send("สวัสดีจากเซิร์ฟเวอร์!");
});

app.listen(3000, () => {
  console.log("เซิร์ฟเวอร์รันที่ http://localhost:3000");
});

รัน:

node index.js

เปิดเบราว์เซอร์ที่ http://localhost:3000 — เห็นข้อความ! 🎉

script ใน package.json

เพิ่มคำสั่งลัดใน package.json:

{
  "scripts": {
    "start": "node index.js",
    "dev": "node --watch index.js"
  }
}

รันด้วย:

npm start
npm run dev     # รีสตาร์ทอัตโนมัติเมื่อแก้โค้ด

โครงสร้างโปรเจกต์ทั่วไป

my-app/
├── node_modules/      ← แพ็กเกจ (อย่าอัป Git)
├── package.json       ← ข้อมูลโปรเจกต์ + dependencies
├── package-lock.json  ← ล็อกเวอร์ชัน
├── .gitignore         ← บอก Git ว่าไม่เอาอะไรบ้าง
└── index.js           ← โค้ดของเรา

.gitignore ควรมี:

node_modules
.env

สรุป

แนวคิดสรุป
Node.jsรัน JS ฝั่งเซิร์ฟเวอร์
npmจัดการแพ็กเกจ
npm init -yสร้าง package.json
npm install Xติดตั้งแพ็กเกจ X
package.jsonข้อมูล + dependencies
node_modules/แพ็กเกจที่ติดตั้ง (ห้ามอัป Git)

บทหน้า: ใช้ Express สร้าง REST API จริงจัง 🚀

อ่านจบแล้ว? ทำเครื่องหมายว่าเสร็จเพื่อบันทึกความคืบหน้า

🧠

แบบทดสอบ

ตอบให้ครบแล้วกด “ตรวจคำตอบ” เพื่อเช็คความเข้าใจ

  1. 1. Node.js คืออะไร?

  2. 2. npm ทำหน้าที่อะไร?

  3. 3. ไฟล์ที่เก็บรายการ dependencies ของโปรเจกต์คือ?

กำลังโหลด…