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

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

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

typescript

TypeScriptの設定に関するオプションです。

config

• デフォルト値: (config) => config
• バージョン1.3.0以降で利用可能

生成されるtsconfig.jsonを編集できる関数です。設定を変更（推奨）するか、新しい設定を返すことができます。これは、例えばモノレポのルートにある共有のtsconfig.jsonを拡張するのに役立ちます。

解説

SvelteKitは、プロジェクトのセットアップ時にtsconfig.jsonファイルを自動生成します。この設定により、生成されるTypeScript設定をカスタマイズできます。

基本的な使用例

// svelte.config.js
export default {
  kit: {
    typescript: {
      config: (config) => {
        // 既存の設定を変更
        config.compilerOptions.strict = true;
        return config; // 変更した設定を返す（または何も返さない）
      }
    }
  }
};

共有設定の拡張

モノレポや大規模プロジェクトで共通のTypeScript設定を拡張する：

// svelte.config.js
export default {
  kit: {
    typescript: {
      config: (config) => {
        // 共有設定を拡張
        config.extends = '../tsconfig.base.json';
        
        // 追加の設定をオーバーライド
        config.compilerOptions = {
          ...config.compilerOptions,
          strictNullChecks: true,
          noImplicitAny: true
        };
      }
    }
  }
};

パスエイリアスの追加

プロジェクト固有のパスエイリアスを追加する：

// svelte.config.js
export default {
  kit: {
    typescript: {
      config: (config) => {
        // パスエイリアスを追加
        config.compilerOptions.paths = {
          ...config.compilerOptions.paths,
          '@components/*': ['src/components/*'],
          '@utils/*': ['src/utils/*']
        };
      }
    }
  }
};

特定のライブラリのサポートを追加

特定のライブラリやフレームワークの型定義を追加する：

// svelte.config.js
export default {
  kit: {
    typescript: {
      config: (config) => {
        // 型定義を追加
        if (!config.compilerOptions.types) {
          config.compilerOptions.types = [];
        }
        
        config.compilerOptions.types.push('jest', 'node');
        
        // 特定のライブラリ用に追加の設定を行う
        config.compilerOptions.esModuleInterop = true;
        config.compilerOptions.allowSyntheticDefaultImports = true;
      }
    }
  }
};

この設定オプションを使うことで、SvelteKitのデフォルトTypeScript設定を維持しつつ、プロジェクト固有の要件や既存の設定との統合を柔軟に行うことができます。

おわりに 

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