ภาพรวมเครื่องมือ

ถ้าคุณมาจากสาย React คุณก็มีแผนที่ในหัวเกี่ยวกับ toolchain อยู่แล้ว: ใช้ Create React App หรือ Vite เพื่อ scaffold, ใช้ tsc เพื่อตรวจสอบ type, ใช้ Jest + React Testing Library เพื่อทดสอบ และใช้ React DevTools เพื่อตรวจสอบ component ตอน runtime SvelteKit มีเครื่องมือที่เทียบเท่ากันสำหรับทุกอย่างเหล่านี้ — และในกรณีส่วนใหญ่เวอร์ชันของ Svelte ตั้งค่าได้ง่ายกว่า

บทเรียนนี้จะแมปเครื่องมือแต่ละตัวของ React ไปยังตัวที่เทียบเท่ากันในฝั่ง Svelte เพื่อให้คุณเริ่มทำงานได้ทันที

เปรียบเทียบ scripts ใน package.json

ความต่างที่เห็นได้ชัดที่สุดในการทำงานประจำวันคือ scripts ใน package.json นี่คือโปรเจกต์ React Vite ทั่วไปวางคู่กับโปรเจกต์ SvelteKit:

// package.json (React + Vite)
{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test": "jest"
  }
}

// package.json (SvelteKit)
{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-check --tsconfig ./tsconfig.json",
    "test": "vitest run"
  }
}

สังเกตว่า tsc && vite build กลายเป็นแค่ vite build — ขั้นตอน build ของ SvelteKit รัน svelte-check ไว้แยกเป็น script check อยู่แล้ว ทำให้การตรวจสอบ type กับการ bundle แยกออกจากกัน

การแมปเครื่องมือ

🔀 React toolchain → Svelte/SvelteKit equivalent

Scaffolding: Create React App / npm create vite@latest (React template) → npm create svelte@latest (SvelteKit) หรือ npm create vite@latest (Svelte template สำหรับแอป standalone)
การตรวจสอบ type: tsc --noEmit → svelte-check --tsconfig ./tsconfig.json (เข้าใจ syntax ของ template .svelte)
การทดสอบ unit + component: Jest + React Testing Library → Vitest + @testing-library/svelte
การทดสอบ end-to-end: Playwright — เหมือนกันทั้งสองฝั่ง ไม่ต้องเปลี่ยนอะไร
ส่วนขยาย devtools ของ browser: React DevTools → Svelte DevTools (ส่วนขยายของ Chrome / Firefox)
การ build เพื่อ production: next build / vite build → npm run build (adapter ของ SvelteKit เป็นตัวกำหนดรูปแบบ output)
ไฟล์ config ของ framework: next.config.js → svelte.config.js
Vite plugin: @vitejs/plugin-react → @sveltejs/vite-plugin-svelte (standalone) หรือ @sveltejs/kit/vite (SvelteKit)

ใจความสำคัญ

เครื่องมือมีชื่อต่างกันแต่ทำหน้าที่เหมือนกัน คุณไม่จำเป็นต้องเรียนรู้ mental model ใหม่สำหรับ toolchain — แค่แทนที่เครื่องมือแต่ละตัวด้วยตัวที่เทียบเท่ากันในฝั่ง Svelte การเปลี่ยนแปลงที่สำคัญที่สุดคือ svelte-check มาแทน tsc สำหรับการตรวจสอบ type ที่เข้าใจ template และ Vitest มาแทน Jest (โดยมี API ที่แทบจะเหมือนกัน)