ย้ายจาก Svelte 4 ไปยัง 5

Svelte 5 เข้ากันได้กับโค้ดเดิมเป็นส่วนใหญ่ คุณสามารถย้ายระบบทีละคอมโพเนนต์ได้

เรียกใช้สคริปต์ย้ายระบบเพื่อแปลงไวยากรณ์แบบเดิมโดยอัตโนมัติ

เครื่องมือแปลงโค้ดจะเขียน export let ใหม่เป็น $props() และเขียน $: ใหม่เป็น $derived/$effect เป็นต้น

ตรวจสอบโค้ดที่ย้ายระบบแล้วเสมอ เนื่องจากรูปแบบบางอย่างต้องอาศัยการตัดสินใจด้วยตนเอง

ไวยากรณ์แบบเก่าและแบบใหม่สามารถอยู่ในไฟล์เดียวกันได้ โดย Svelte 5 จะตรวจจับแยกกันในแต่ละบล็อก

พร็อกซีของ $state ทำให้ array.push() ตอบสนองได้ คุณอาจลบการกำหนดค่าใหม่เพื่อแก้ปัญหาแบบเดิมออกได้

createEventDispatcher ถูกแทนที่ด้วยพร็อพส์แบบคอลแบ็กที่ส่งผ่าน $props()

สล็อตยังคงใช้งานได้ แต่สำหรับคอมโพเนนต์ใหม่ ควรพิจารณาเขียนใหม่เป็นสนิปเป็ต

svelte/store ยังคงได้รับการรองรับ คุณสามารถใช้สโตร์ต่อไปหรือปรับโครงสร้างไปใช้ $state สำหรับสถานะแอปได้

ไลบรารีส่วนใหญ่รองรับทั้งสองเวอร์ชัน ให้ปรับปรุงทีละคอมโพเนนต์

เอกสาร Svelte 5 มีคู่มือการย้ายระบบพร้อมการเปรียบเทียบแบบเคียงข้างกัน

คุณสามารถใช้ไวยากรณ์ของ Svelte 4 และ 5 ร่วมกันได้หรือไม่

ย้ายไปใช้ Svelte 5 ด้วย npx sv migrate svelte-5 โดยไวยากรณ์แบบเดิมยังคงทำงานได้ เพื่อให้ทยอยปรับใช้ได้