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

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

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

%%{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

แนวคิดสำคัญ

ตารางเปรียบเทียบ 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

%%{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"]

Code Example

{
  "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"
  }
}

# สร้าง 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 ให้อัตโนมัติ

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

กลับสัปดาห์ที่ 10