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