Svelte入門：SvelteKitでのパッケージング -Vol.1-

今日は、SvelteKitでのパッケージングについて解説しています。

背景

SvelteKitでのパッケージングについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

パッケージング

@sveltejs/packageパッケージを使用して、アプリケーションだけでなくコンポーネントライブラリも構築できます（npx sv createにはこれを設定するオプションがあります）。

アプリケーションを作成する場合、src/routesの内容が公開向けの部分となり、src/libにはアプリケーションの内部ライブラリが含まれます。

コンポーネントライブラリはSvelteKitアプリケーションとまったく同じ構造を持ちますが、src/libが公開向けの部分となり、ルートのpackage.jsonがパッケージの公開に使用される点が異なります。src/routesはライブラリに付属するドキュメントやデモサイトであったり、開発中に使用するサンドボックスであったりします。

@sveltejs/packageのsvelte-packageコマンドを実行すると、src/libの内容からdistディレクトリ（設定可能）が生成され、以下が含まれます：

• src/libのすべてのファイル。Svelteコンポーネントは前処理され、TypeScriptファイルはJavaScriptにトランスパイルされます。
• Svelte、JavaScript、TypeScriptファイルに対して生成される型定義（d.tsファイル）。これにはtypescript >= 4.0.0のインストールが必要です。型定義は実装の隣に配置され、手書きのd.tsファイルはそのままコピーされます。生成を無効にすることもできますが、強く推奨されません – ライブラリを使用する人々がTypeScriptを使用する可能性があり、その場合これらの型定義ファイルが必要となります。

@sveltejs/packageバージョン1ではpackage.jsonを生成していましたが、現在はそうではなく、プロジェクトのpackage.jsonを使用し、その正確性を検証するようになっています。バージョン1を使用している場合は、このPRを参照して移行手順を確認してください。

解説

この記事ではSvelteKitのパッケージング機能について説明しています。主なポイントを詳しく解説します：

1. プロジェクト構造の違い：

• アプリケーション：
  • src/routes → 公開部分
  • src/lib → 内部ライブラリ
• コンポーネントライブラリ：
  • src/lib → 公開部分
  • src/routes → ドキュメント/デモ用

1. パッケージングプロセス：

• svelte-packageコマンドの使用
• distディレクトリの生成
• ファイルの前処理とトランスパイル

1. 型定義の扱い：

• 自動生成されるd.tsファイル
• TypeScript 4.0.0以上が必要
• 手書きの型定義ファイルの保持

1. バージョン1からの変更点：

• package.jsonの生成方法の変更
• プロジェクトのpackage.jsonの使用
• 検証プロセスの追加

このような構造は以下の場合に特に有用です：

• 再利用可能なコンポーネントライブラリの作成
• TypeScriptを使用したプロジェクト
• 公開用パッケージの開発
• ドキュメント付きのライブラリ開発

おわりに

今日は、 SvelteKitでのパッケージングについて解説しました。