メインコンテンツにスキップ

SvelteKitとの併用

SvelteKitプロジェクトでFSDを実装することは可能ですが、SvelteKitのプロジェクト構造要件とFSDの原則の違いにより、以下の2点でコンフリクトが発生してしまいます。

  • SvelteKitはsrc/routesフォルダー内でファイル構造を作成することを提案しているが、FSDではルーティングはapp層の一部である必要がある
  • SvelteKitは、ルーティングに関係のないすべてのものをsrc/libフォルダーに入れることを提案している

コンフィグファイルの設定​

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', // ルーティングをapp層内に移動
      lib: 'src',
      appTemplate: 'src/app/index.html', // アプリケーションのエントリーポイントをapp層内に移動
      assets: 'public'
    },
    alias: {
        '@/*': 'src/*' // srcディレクトリのエイリアスを作成
    }
  }
};
export default config;

src/app内へのファイルルーティングの移動​

app層を作成し、アプリケーションのエントリーポイントであるindex.htmlを移動し、routesフォルダーを作成します。 最終的にファイル構造は次のようになります。

├── src
│   ├── app
│   │   ├── index.html
│   │   ├── routes
│   ├── pages # FSDに割り当てられたpagesフォルダー

これで、app内にページのルートを作成したり、pagesからのページをルートに接続したりできます。

例えば、プロジェクトにホームページを追加するには、次の手順を実行します。

  • pages層内にホームページスライスを追加する
  • app層のroutesフォルダーに対応するルートを追加する
  • スライスのページとルートを統合する

ホームページスライスを作成するには、CLIを使用します。

fsd pages home

uiセグメント内にhome-page.svelteファイルを作成し、公開APIを介してアクセスできるようにします。　

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

このページのルートをapp層内に作成します。


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

最後にindex.svelteファイル内にページコンポーネントを追加します。

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


<HomePage/>

参照​