Vite + @sveltejs/vite-plugin-svelte

นักพัฒนา React ที่ใช้ Vite คงคุ้นเคยกับ @vitejs/plugin-react อยู่แล้ว — plugin ตัวนี้เพิ่ม JSX transform และ Fast Refresh ให้กับ dev server ของ Vite ฝั่ง Svelte ก็มีตัวเทียบเท่าโดยตรง: @sveltejs/vite-plugin-svelte ซึ่งคอมไพล์ไฟล์ .svelte และต่อ HMR ของ Svelte ให้ ถ้าคุณใช้ SvelteKit (framework แบบ full-stack) plugin ตัวนี้จะถูกห่อหุ้มอยู่ใน @sveltejs/kit/vite และตั้งค่าให้คุณโดยอัตโนมัติ

เปรียบเทียบ vite.config

// vite.config.ts (React)
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

// vite.config.ts (Svelte standalone)
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
});

vite.config ของ SvelteKit

เมื่อคุณใช้ SvelteKit ไฟล์ Vite config จะยิ่งเรียบง่ายขึ้น เพราะ sveltekit() จัดการการต่อ plugin ทั้งหมดให้ภายใน:

// vite.config.ts (SvelteKit)
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
});

ในโปรเจกต์ SvelteKit คุณ ไม่ต้อง import @sveltejs/vite-plugin-svelte โดยตรง — sveltekit() ทำ re-export และตั้งค่าให้คุณแล้ว

การติดตั้ง

ติดตั้ง Svelte plugin แบบ standalone (โปรเจกต์ที่ไม่ใช่ SvelteKit):

npm install --save-dev @sveltejs/vite-plugin-svelte svelte

สร้างโปรเจกต์ SvelteKit ขึ้นมาใหม่:

npm create svelte@latest my-app
cd my-app
npm install
npm run dev

พฤติกรรม HMR

ทั้ง React และ Svelte ต่างใช้โครงสร้าง HMR ดั้งเดิมของ Vite ความต่างอยู่ที่ว่าเกิดอะไรขึ้นกับ state ของ component เมื่อมีการบันทึกไฟล์:

React Fast Refresh จะรักษา local state ไว้สำหรับ component ที่รูปแบบของ hook ไม่เปลี่ยน หากคุณเพิ่มหรือลบการเรียก useState state จะถูกรีเซ็ต
Svelte HMR จะรักษา reactive state (ตัวแปร $state) ไว้โดยค่าเริ่มต้นในการแก้ไขส่วนใหญ่ แม้ว่าคุณจะเปลี่ยน markup หรือเพิ่มตัวแปร state ใหม่ก็ตาม

🔀 React Vite plugin vs Svelte Vite plugin

React: @vitejs/plugin-react — เพิ่ม Babel JSX transform + React Fast Refresh
Svelte (standalone): @sveltejs/vite-plugin-svelte — คอมไพล์ไฟล์ .svelte + Svelte HMR
SvelteKit: @sveltejs/kit/vite (sveltekit()) — ห่อหุ้ม svelte plugin + routing, SSR และ adapter hooks
CRA (Create React App) ใช้ webpack อยู่เบื้องหลังและถูกเลิกใช้แล้วในปัจจุบัน ส่วน SvelteKit ใช้ Vite โดยตรง
การรักษา state ของ HMR: React รีเซ็ต state หากรูปแบบของ hook เปลี่ยน; Svelte HMR รักษา state ไว้ในการแก้ไขส่วนใหญ่
ทั้งคู่รองรับ TypeScript, CSS modules และ path aliases ผ่าน Vite config ร่วมกัน