Tooling, Testing & Production

จาก component สู่แอปที่ ship แล้ว

ตอนนี้คุณรู้จัก Svelte ในฐานะภาษาแล้ว โมดูลนี้คือ workflow รอบ ๆ ตัวภาษา — วิธี scaffold โปรเจกต์, รักษา type ให้ปลอดภัย, พิสูจน์ว่าทำงาน และเอาไปให้ผู้ใช้จริง ไม่มีอะไรเป็น magic เฉพาะ Svelte — เป็นงาน craft ปกติของโปรเจกต์ที่ใช้ Vite โดยมีเครื่องมือรสชาติ Svelte ชี้ให้เห็นตรงจุด

โมดูลนี้ครอบคลุมอะไร

บทเรียน	สิ่งที่คุณจะได้เรียน
Project & tooling	scaffold ด้วย `sv create`, Vite และ `svelte-check`
TypeScript with Svelte	type ให้ rune, props, snippet และ generic component
Testing	Vitest, `@testing-library/svelte` และ Playwright
Performance & deploy	output ที่เล็ก, adapter, prerendering และ production build

toolchain แบบมองรวม

flowchart LR
  sv["sv CLI: scaffold"] --> vite["Vite: dev server + build"]
  vite --> check["svelte-check: types + diagnostics"]
  vite --> test["Vitest + Playwright: tests"]
  vite --> adapter["SvelteKit adapter: deploy target"]
  adapter --> prod["production site"]

อะไรอยู่รอบ ๆ Svelte component ของคุณ

แกนหลัก: Svelte compile ออกมาเป็น output ที่เล็กโดย default และเครื่องมือรอบ ๆ (Vite, svelte-check, Vitest, adapter) ก็คือ JavaScript toolchain สมัยใหม่แบบเดียวกับที่คุณใช้ที่อื่น ๆ ส่วนใหญ่จึงย้ายมาจาก framework อื่นได้ตรง ๆ

โปรเจกต์ Svelte/SvelteKit สมัยใหม่ใช้ build tool อะไรเป็นฐาน? Webpack อย่างเดียว Vite Rollup ที่ตั้งค่าเองด้วยมือ ไม่มี build tool

`svelte-check` ทำอะไร? รันแอปบน production type-check และรายงาน diagnostics ทั่วไฟล์ .svelte รวมถึงในส่วน markup ด้วย minify CSS deploy เว็บไซต์