การสร้างโครงการด้วย npm create svelte
สร้างโครงร่างโครงการ SvelteKit ใหม่โดยใช้ CLI อย่างเป็นทางการ พร้อมเลือกตัวเลือกที่เหมาะสม
การสร้างโครงการด้วย npm create svelte เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
เครื่องมือสร้างโครงโปรเจกต์
วิธีอย่างเป็นทางการในการเริ่มโปรเจกต์ SvelteKit คือใช้คำสั่ง npm create svelte@latest ซึ่งจะสร้างแอปที่พร้อมเรียกใช้งาน
npm create svelte@latest my-appคำถามจากตัวช่วยสร้าง
ระบบจะขอให้คุณเลือกแม่แบบ (โครงพื้นฐาน แอปตัวอย่าง) การรองรับ TypeScript และเครื่องมือ (ESLint, Prettier, Playwright, Vitest)
ตัวเลือกแม่แบบ
โปรเจกต์ Skeleton มีโครงสร้างขั้นต่ำ ส่วนแอป Demo มีตัวอย่างเกม Sverdle ขนาดเล็กให้ศึกษา
ตัวเลือก TypeScript
เลือก Yes สำหรับ TypeScript หากต้องการความปลอดภัยด้านชนิดข้อมูล ตัวช่วยสร้างจะตั้งค่า TS และใช้ lang="ts" ในบล็อกสคริปต์
ติดตั้งแพ็กเกจ
หลังจากตัวช่วยสร้างทำงานเสร็จ ให้เปลี่ยนไดเรกทอรีและติดตั้งแพ็กเกจ
cd my-app
npm installเริ่มเซิร์ฟเวอร์สำหรับพัฒนา
ใช้สคริปต์ dev เพื่อเปิดเซิร์ฟเวอร์ที่รีโหลดทันทีที่พอร์ต http://localhost:5173
npm run devเปิดในเบราว์เซอร์
ไปยัง URL ที่แสดงในเทอร์มินัล คุณควรเห็นหน้าต้อนรับ แก้ไข src/routes/+page.svelte แล้วดูการอัปเดตแบบสด
การสร้างสำหรับใช้งานจริง
สคริปต์ build จะเรียกใช้คอมไพเลอร์และสร้างไดเรกทอรีผลลัพธ์ที่พร้อมนำไปให้บริการ
npm run build
npm run previewเลือกตัวจัดการแพ็กเกจ
คุณสามารถใช้ npm, pnpm หรือ yarn ได้ โดย pnpm ได้รับความนิยมเพราะใช้พื้นที่ดิสก์อย่างมีประสิทธิภาพและแก้ไขการอ้างอิงได้อย่างเคร่งครัด
ตั้งค่าเครื่องมือแก้ไข
ติดตั้งส่วนขยาย Svelte for VS Code เพื่อใช้การเน้นไวยากรณ์ IntelliSense และการวินิจฉัยข้อผิดพลาดในไฟล์ .svelte
เริ่มต้น Git หรือไม่ก็ได้
ตัวช่วยสร้างมีตัวเลือกให้เริ่มต้นที่เก็บ Git การตอบตกลงจะเพิ่มไฟล์ .gitignore ที่เหมาะสมให้
ตรวจสอบความเข้าใจ
คำสั่งใดใช้สร้างโปรเจกต์ SvelteKit ใหม่
ทบทวน
ตอนนี้คุณสามารถสร้างโครงโปรเจกต์ เลือก TypeScript และเครื่องมือ ติดตั้งแพ็กเกจ และเรียกใช้สคริปต์ dev หรือ build ได้แล้ว
คำถามที่พบบ่อย
บทเรียน “การสร้างโครงการด้วย npm create svelte” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การสร้างโครงการด้วย npm create svelte” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การสร้างโครงการด้วย npm create svelte”
สร้างโครงร่างโครงการ SvelteKit ใหม่โดยใช้ CLI อย่างเป็นทางการ พร้อมเลือกตัวเลือกที่เหมาะสม คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การสร้างโครงการด้วย npm create svelte” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- Svelte คืออะไร และเหตุใดจึงคอมไพล์
- การสร้างโครงการด้วย npm create svelte
- โครงสร้างโครงการ: src routes static
- เซิร์ฟเวอร์พัฒนาและการแทนที่โมดูลแบบฉับไว