ข้ามไปยังเนื้อหาหลัก

การใช้ร่วมกับ SvelteKit

เป็นไปได้ที่จะใช้ FSD ในโปรเจกต์ SvelteKit แต่จะเกิดความขัดแย้งเนื่องจากความแตกต่างระหว่างข้อกำหนดโครงสร้างของโปรเจกต์ SvelteKit และหลักการของ FSD:

  • โดยปกติ SvelteKit เสนอโครงสร้างไฟล์ภายในโฟลเดอร์ src/routes ในขณะที่ใน FSD การ Routing ต้องเป็นส่วนหนึ่งของ app layer
  • SvelteKit แนะนำให้วางทุกอย่างที่ไม่เกี่ยวกับ Routing ไว้ในโฟลเดอร์ src/lib

มาตั้งค่า Config กัน​

svelte.config.ts
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config}*/
const config = {
  preprocess: [vitePreprocess()],
  kit: {
    adapter: adapter(),
    files: {
      routes: 'src/app/routes',             // ย้าย Routing ไปไว้ใน App layer
      lib: 'src',
      appTemplate: 'src/app/index.html',    // ย้าย App entry point ไปไว้ใน App layer
      assets: 'public'
    },
    alias: {
      '@/*': 'src/*'                        // สร้าง Alias สำหรับ Src directory
    }
  }
};
export default config;

ย้าย File Routing ไปที่ src/app​

มาสร้าง App layer, ย้าย index.html ซึ่งเป็น Entry point ของแอปเข้าไปข้างในนั้น และสร้างโฟลเดอร์ Routes ดังนั้น โครงสร้างไฟล์ของคุณควรจะเป็นดังนี้:

├── src
│   ├── app
│   │   ├── index.html
│   │   ├── routes
│   ├── pages                               # FSD Pages folder

ตอนนี้ คุณสามารถสร้าง Routes สำหรับ Pages ภายใน app และเชื่อมต่อ Pages จาก pages เข้ากับพวกมัน

ตัวอย่างเช่น ในการเพิ่ม Home page ในโปรเจกต์ คุณต้องทำตามขั้นตอนเหล่านี้:

  • เพิ่ม Page slice ภายใน pages layer
  • เพิ่ม Route ที่สอดคล้องกันในโฟลเดอร์ routes จาก app layer
  • เชื่อมต่อ Page จาก Slice เข้ากับ Route

ในการสร้าง Page slice ลองใช้ CLI:

fsd pages home

สร้างไฟล์ home-page.svelte ภายใน UI segment, เข้าถึงมันโดยใช้ Public API

src/pages/home/index.ts
export { default as HomePage } from './ui/home-page.svelte';

สร้าง Route สำหรับหน้านี้ภายใน app layer:


├── src
│   ├── app
│   │   ├── routes
│   │   │   ├── +page.svelte
│   │   ├── index.html
│   ├── pages
│   │   ├── home
│   │   │   ├── ui
│   │   │   │   ├── home-page.svelte
│   │   │   ├── index.ts

เพิ่ม Page component ของคุณภายในไฟล์ +page.svelte:

src/app/routes/+page.svelte
<script>
  import { HomePage } from '@/pages/home';
</script>


<HomePage/>

ดูเพิ่มเติม​