ข้ามไปยังเนื้อหา
Svelte Deep Dive

Project & Tooling

scaffold ด้วย sv CLI

หัวข้อที่มีชื่อว่า “scaffold ด้วย sv CLI”

วิธีเริ่มโปรเจกต์ Svelte หรือ SvelteKit ในปัจจุบันคือ sv CLI คำสั่งเดียว scaffold โปรเจกต์และเพิ่ม integration ได้ (TypeScript, Prettier, ESLint, Tailwind, testing) แบบ interactive:

Terminal window
npx sv create my-app
cd my-app
npm install
npm run dev

sv create มาแทน flow เดิม npm create svelte@latest โดยตั้งค่าโปรเจกต์ SvelteKit ให้เป็น default (วิธีที่แนะนำในการสร้างแอป Svelte), wire up Vite ให้ และให้คุณเลือก add-on ตั้งแต่ต้น มี npx sv add <name> สำหรับเพิ่ม integration เข้าโปรเจกต์ที่มีอยู่แล้วภายหลังด้วย

Vite ขับเคลื่อนทุกอย่าง

หัวข้อที่มีชื่อว่า “Vite ขับเคลื่อนทุกอย่าง”

โปรเจกต์ Svelte รันบน Vite ตอน development Vite serve โมดูลของคุณผ่าน native ESM พร้อม hot module replacement — แก้ component แล้วเห็นการเปลี่ยนแปลงโดยไม่ต้อง reload ทั้งหน้า และรักษา state ไว้ได้เท่าที่ทำได้ ส่วน production vite build จะ bundle และ optimize output

{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-check --tsconfig ./tsconfig.json"
  }
}

Svelte integration ของ Vite (@sveltejs/vite-plugin-svelte ที่ sv create wire ให้แล้ว) คือสิ่งที่รัน compiler บนไฟล์ .svelte ตอน dev และ build คุณแทบไม่ต้องแตะ plugin ตัวนี้ตรง ๆ

flowchart LR
  code["your .svelte / .ts files"] --> vite["Vite + svelte plugin"]
  vite --> dev["dev: HMR server"]
  vite --> build["build: compiled, bundled output"]
pipeline ของ dev และ build

editor support และ svelte-check

หัวข้อที่มีชื่อว่า “editor support และ svelte-check”

มีเครื่องมือสองตัวที่ช่วยให้ประสบการณ์การเขียนตรงไปตรงมา:

  • Svelte editor extension (ทางการ สำหรับ VS Code และตัวอื่น) ให้ syntax highlighting, autocompletion และ inline diagnostics สำหรับไฟล์ .svelte — รวมถึง type error ใน markup ไม่ใช่แค่ใน script
  • svelte-check คือเวอร์ชัน command-line: type-check และ lint ทั้งโปรเจกต์ รวมถึง expression ใน template คุณจึงจับ error ใน CI แบบเดียวกับที่ editor โชว์ให้ตอนอยู่ในเครื่อง
Terminal window
npm run check      # runs svelte-check across the project

เพราะ svelte-check เข้าใจไฟล์ .svelte แบบครบวงจร จึงจับ error ที่ tsc ธรรมดามองไม่เห็น — prop type ที่ส่งผิดใน markup, typo ใน template expression, CSS selector ที่ไม่ได้ใช้ Prettier และ ESLint (พร้อม plugin ของ Svelte ที่ sv create เสนอให้) เติมเรื่อง formatting และ linting ให้ครบ

คำสั่งปัจจุบันสำหรับ scaffold โปรเจกต์ Svelte/SvelteKit ใหม่คืออะไร?
Vite ให้อะไรตอน development?
ทำไมใช้ `svelte-check` แทน `tsc` ธรรมดา?