Svelte入門：SvelteKitのプロジェクト構造

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitのプロジェクトについて解説しています。

背景
プロジェクト構造
おわりに

背景

SvelteKitのプロジェクトについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

プロジェクト構造

プロジェクト構造は下記のようになっています。

my-project/
├ src/
│ ├ lib/
│ │ └ [your lib files]
│ ├ routes/
│ │ └ [your routes]
│ ├ app.html
│ ├ error.html
│ ├ hooks.client.js
│ ├ hooks.server.js
│ └ service-worker.js
├ static/
│ └ [your static assets]
├ package.json
├ svelte.config.js
├ tsconfig.json
└ vite.config.js

src

srcディレクトリにはプロジェクトの本体が含まれます。 src/routes と src/app.html以外はすべてオプションです。

libにはライブラリコード（ユーティリティとコンポーネント）が含まれており、$libエイリアス経由でインポートするか、svelte-packageを使用して配布用にパッケージ化することができます。
- serverサーバー専用のライブラリコードが含まれています。$lib/serverエイリアスを使用してインポートできます。SvelteKit は、これらをクライアントコードにインポートできないようにします。
routesアプリケーションのルートが含まれます。単一のルート内でのみ使用される他のコンポーネントをここに共存させることもできます。
app.htmlページテンプレートは、次のプレースホルダーを含む HTML ドキュメントです。
- %sveltekit.head%—アプリに必要な要素<link>とコンテンツ<script><svelte:head>
- %sveltekit.body%— レンダリングされたページのマークアップ。ブラウザ拡張機能が要素を挿入してハイドレーションプロセスによって破壊されることによるバグを防ぐため<div>、または他の要素内に配置する必要があり、内に直接配置する必要はありません<body>。そうでない場合、SvelteKit は開発中に警告を発します。
- %sveltekit.assets%— paths.assets（指定されている場合）、または相対パスpaths.base
- %sveltekit.nonce%—手動で追加されたリンクやスクリプトのCSP nonce（使用される場合）
- %sveltekit.env.[NAME]%– これはレンダリング時に環境変数に置き換えられます。環境変数は(通常は)[NAME]で始まる必要があります。一致しない場合はにフォールバックします。publicPrefixPUBLIC_''
error.html他のすべてが失敗したときにレンダリングされるページです。次のプレースホルダーを含めることができます。
- %sveltekit.status%— HTTPステータス
- %sveltekit.error.message%— エラーメッセージ

(プロジェクトにファイルが含まれているかどうかは.js、.tsプロジェクトの作成時に TypeScript を使用するかどうかによって異なります。)

static

robots.txt や favicon.png など、そのまま提供する必要がある静的アセットはすべてここに入力します。

package.json

package.json ファイルには、devDependencies として @sveltejs/kit、svelte、vite が含まれている必要があります。

npm create svelte@latest でプロジェクトを作成すると、package.json に “type”: “module” が含まれていることにも気付くでしょう。これは、.js ファイルが import および export キーワードを含むネイティブ JavaScript モジュールとして解釈されることを意味します。レガシー CommonJS ファイルには、.cjs ファイル拡張子が必要です。

svelte.config.js

このファイルには、Svelte および SvelteKit の構成が含まれています

tsconfig.json

このファイル (または、.ts ファイルよりも型チェックされた .js ファイルを好む場合は jsconfig.json) は、npm create svelte@latest 中に型チェックを追加した場合に TypeScript を構成します。SvelteKit は特定の方法で設定された特定の構成に依存しているため、独自の構成で拡張される独自の .svelte-kit/tsconfig.json ファイルを生成します。