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

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/>

参照