reveal.js

# NPM/Yarn: การจัดการ Package

Lesson 2 - Node.js และการโปรแกรมฝั่ง Server

**npm** และ **Yarn** คือเครื่องมือจัดการ Package สำหรับ JavaScript ใช้ติดตั้ง dependency, จัดการ script, ล็อกเวอร์ชัน และทำให้ทีมใช้ชุด package เดียวกันได้สม่ำเสมอ

---

## Timeline/ประวัติศาสตร์

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
 subgraph Era1["ยุค Script Manual / Manual Era"]
 A["ดาวน์โหลด library เอง จัดไฟล์เอง"]
 end
 subgraph Era2["ยุค Package Manager / npm Era"]
 B["npm init สร้าง package.json"]
 C["npm install ติดตั้ง dependency"]
 end
 subgraph Era3["ยุค Reproducible Build / Lockfile Era"]
 D["package-lock.json ล็อกเวอร์ชัน"]
 E["scripts + npx รันงานมาตรฐาน"]
 end
 A --> B --> C --> D --> E
</pre>

---

## แนวคิดสำคัญ

- **`npm init -y`** สร้างไฟล์ `package.json`
- **`npm install express`** ติดตั้ง Dependency ที่ใช้ตอน runtime
- **`npm install --save-dev nodemon`** ติดตั้ง Dev Dependency ที่ใช้ระหว่างพัฒนา
- **`package.json`** เก็บ `dependencies`, `devDependencies`, `scripts`
- **`npm run start` / `npm run dev`** ใช้รัน Script ที่กำหนดไว้
- **`npx`** รันคำสั่งจาก Package โดยไม่ต้องติดตั้งแบบ global
- **`package-lock.json`** ล็อก Version ของ dependency ทั้งหมด

---

## ตารางเปรียบเทียบ dependencies

| ประเภท | ติดตั้งด้วย | ใช้เมื่อใด | ตัวอย่าง |
|---|---|---|---|
| `dependencies` | `npm install express` | ใช้ตอนแอปรันจริง | express, dotenv |
| `devDependencies` | `npm install -D nodemon` | ใช้ตอนพัฒนา/test/build | nodemon, eslint |
| global package | `npm install -g` | ใช้เป็นคำสั่งทั้งเครื่อง | angular cli |
| npx | `npx package` | รันชั่วคราว | create tools |

---

## Mermaid Diagram: npm Workflow

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart TD
 A["เริ่มโปรเจกต์ npm init -y"] --> B["ติดตั้ง package npm install"]
 B --> C["แก้ scripts package.json"]
 C --> D["รัน dev npm run dev"]
 D --> E["ล็อกเวอร์ชัน package-lock.json"]
 E --> F["ติดตั้งซ้ำได้ npm ci"]
</pre>

---

## Code Example

```json
{
  "name": "node-api-course",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "dependencies": {
    "express": "^4.18.3"
  },
  "devDependencies": {
    "nodemon": "^3.1.0"
  }
}
```

```powershell
# สร้าง package.json แบบใช้ค่าเริ่มต้น
npm init -y

# ติดตั้ง express เป็น runtime dependency
npm install express

# ติดตั้ง nodemon เป็น dev dependency
npm install --save-dev nodemon

# รัน script ที่กำหนดใน package.json
npm run dev

# ตัวอย่างการใช้งาน:
# แก้ไฟล์ server.js แล้ว nodemon จะ restart server ให้อัตโนมัติ
```

---

## กิจกรรมท้ายบท

- สร้างโปรเจกต์ Node.js ใหม่
- เพิ่ม script `start` และ `dev`
- ติดตั้ง `express` และ `nodemon`
- อธิบายความต่างระหว่าง `package.json` กับ `package-lock.json`

---

## End

<a href="/web-programming/10-node-server/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>