Svelte入門：リファレンス Configuration -Vol.12-

今日は、SvelteKitのリファレンスについて解説しています。

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

KitConfig

kit プロパティは SvelteKit を設定するために使用され、以下のようなプロパティを持つことができます：

svelte.config.js ファイル内の kit オブジェクトは、SvelteKit アプリケーションの核となる設定を定義します。このプロパティによって、アプリケーションのルーティング、ビルド、デプロイなどの多くの側面をカスタマイズできます。

例えば：

const config = {
  kit: {
    // KitConfig プロパティがここに入ります
    adapter: adapter(),
    paths: {
      base: '/my-app',
      assets: 'https://cdn.example.com'
    },
    // その他の設定...
  }
};

KitConfig には多くのプロパティが含まれる可能性があり、プロジェクトの要件に応じて以下のような設定が可能です：

• adapter: アプリケーションのデプロイ先環境を定義します（Node.js、静的サイト、AWS Lambda など）
• paths: ベースパスやアセットパスなどのパス設定
• prerender: プリレンダリングの設定
• env: 環境変数の扱い方
• csp: コンテンツセキュリティポリシー設定
• alias: インポートパスのエイリアス
• files: さまざまなファイルやディレクトリの場所
• outDir: ビルド出力先のディレクトリ
• version: アプリケーションのバージョン管理方法

こうした設定を変更することで、SvelteKit アプリケーションの動作を特定の要件に合わせてカスタマイズできます。

（注：具体的な各プロパティの詳細説明がドキュメントにはさらに記載されていると思われますが、入力された文章には含まれていないため、一般的な説明に留めています。）

outDir

• デフォルト値: ".svelte-kit"

SvelteKitがdev（開発）およびbuild（ビルド）の際にファイルを書き込むディレクトリです。このディレクトリはバージョン管理から除外するべきです。

解説

この設定項目は、SvelteKitが内部的に使用する一時ファイルやビルド中間ファイルの保存先を指定します。

• .svelte-kitというディレクトリがデフォルトの出力先です
• このディレクトリには、開発サーバーの実行時やプロジェクトのビルド時に生成される一時ファイルが格納されます
• これらのファイルは自動生成されるため、.gitignoreなどでバージョン管理から除外することが推奨されています

設定例

// svelte.config.js
import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    outDir: '.svelte-output' // デフォルトの '.svelte-kit' から変更
  },
  // その他の設定...
};

export default config;

この設定を変更する一般的な理由としては、プロジェクト構造の調整や、特定のビルドパイプラインやCI/CDシステムとの互換性確保などが挙げられます。ほとんどの場合はデフォルト設定のままで問題ありません。

おわりに 

今日は、 SvelteKitのリファレンスについて解説しました。