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

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

背景

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

Configuration

プロジェクトの設定は、プロジェクトのルートディレクトリにある svelte.config.js ファイルに記述されています。この設定オブジェクトは、SvelteKitだけでなく、エディタ拡張機能などのSvelteと統合する他のツールでも使用されます。

svelte.config

import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter()
	}
};

export default config;

解説

SvelteKitプロジェクトの設定ファイルについての説明です。重要なポイントは以下の通りです：

1. 設定ファイルの場所: svelte.config.js というファイルがプロジェクトのルート（最上位）ディレクトリに配置されます。
2. 設定ファイルの用途: この設定ファイルはSvelteKitだけでなく、Svelteと連携する他のツール（エディタの拡張機能など）でも使用されます。
3. 基本的な設定構造:
   • アダプターをインポートしています（この例では @sveltejs/adapter-auto）
   • config オブジェクトを作成し、その中に kit プロパティを定義しています
   • kit プロパティ内で adapter を設定しています
   • 最後に config オブジェクトをエクスポートしています
4. アダプターについて: SvelteKitでは、アダプターがプロジェクトをどのような環境用にビルドするかを決定します。adapter-auto は自動的にデプロイ環境を検出してそれに応じたビルドを行うアダプターです。

この設定ファイルは最小限の内容ですが、SvelteKitプロジェクトを動作させるための基本的な設定が含まれています。必要に応じて、ルーティング、レンダリングオプション、その他のプロジェクト固有の設定などをこのファイルに追加することができます。

Config

Config インターフェイスの定義とそのプロパティの解説です。

interface Config {…}

compilerOptions?: CompileOptions;

• デフォルト値: {}
• 説明: svelte.compile に渡すオプションです。

extensions?: string[];

• デフォルト値: [".svelte"]
• 説明: Svelteファイルとして扱われるべきファイル拡張子のリストです。

kit?: KitConfig;

• 説明: SvelteKitのオプションを指定します。

preprocess?: any;

• 説明: プリプロセッサのオプション（もしあれば）。プリプロセスは代わりにViteのプリプロセッサ機能を通して行うこともできます。

vitePlugin?: PluginOptions;

• 説明: vite-plugin-svelte プラグインのオプションを指定します。

[key: string]: any;

• 説明: Svelteと統合するツールに必要なその他の追加オプションを指定できます。

解説

このインターフェイスは svelte.config.js ファイルで使用できる全オプションを定義しています。以下のような点が重要です：

1. コンパイラオプション: Svelteコンパイラ自体の動作をカスタマイズできます。
2. ファイル拡張子の設定: デフォルトでは .svelte 拡張子のファイルがSvelteファイルとして認識されますが、これを拡張して他の拡張子も含めることができます。
3. SvelteKitの設定: kit プロパティの中でSvelteKit固有の設定を行います。
4. プリプロセッサ: TypeScriptやSCSSなどの前処理を設定できます。Viteのプリプロセッサ機能を使うこともできるという選択肢もあります。
5. Viteプラグイン設定: SvelteKitはViteをベースにしているため、Viteプラグインのオプションを設定できます。
6. 拡張性: 最後の [key: string]: any によって、将来追加される可能性のあるオプションや、Svelteと連携する他のツール固有のオプションをサポートする柔軟性を持たせています。

これらの設定を組み合わせることで、SvelteとSvelteKitの動作を細かくカスタマイズできます。

おわりに 

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