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

よっしー

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

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

背景
KitConfig
1. moduleExtensions
  1. 解説
  2. 例
おわりに

背景

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 アプリケーションの動作を特定の要件に合わせてカスタマイズできます。

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

moduleExtensions

デフォルト値: [".js", ".ts"]

SvelteKitがモジュールとして扱うファイル拡張子の配列です。config.extensionsにもconfig.kit.moduleExtensionsにも一致しない拡張子を持つファイルは、ルーターによって無視されます。

解説

この設定項目は、SvelteKitのルーティングシステムがどのファイルをJavaScript/TypeScriptモジュールとして認識するかを制御します。

デフォルトでは、.jsと.tsファイルがモジュールとして扱われます
この設定を変更することで、他の拡張子をモジュールとして認識させることができます
重要なポイントは、この設定とconfig.extensions（Svelteコンポーネントの拡張子）のどちらにも一致しないファイルはルーターによって完全に無視されるということです

例えば、特定のJSXファイルなどをモジュールとして使いたい場合、この配列に.jsxや.tsxを追加することができます。

例

SvelteKitのmoduleExtensions設定の具体的な例をいくつか紹介します：

基本的な設定例（svelte.config.js）

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    moduleExtensions: ['.js', '.ts'] // デフォルト設定
  },
  // その他の設定...
};

export default config;

JSXファイルをモジュールとして扱う例

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    moduleExtensions: ['.js', '.ts', '.jsx', '.tsx'] // JSX/TSXファイルも含める
  },
  // その他の設定...
};

export default config;

カスタムモジュール拡張子を追加する例

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    moduleExtensions: ['.js', '.ts', '.mjs', '.cjs'] // ES ModulesやCommonJSも明示的に含める
  },
  // その他の設定...
};

export default config;

この設定を変更すると、指定した拡張子を持つファイルがルーターによってモジュールとして処理されます。たとえば、+page.js、+page.tsだけでなく、+page.jsxや+page.tsxのようなファイルも有効なルートファイルとして扱うことができるようになります。