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

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

背景

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

svelte-packageのオプション

SvelteKitのパッケージングツールsvelte-packageのオプションについて解説しています。

-w / --watch

• 機能：src/lib内のファイルの変更を監視し、変更があった場合にパッケージを再ビルド
• 使用例：svelte-package --watch

-i / --input

• 機能：パッケージのすべてのファイルを含む入力ディレクトリを指定
• デフォルト値：src/lib
• 使用例：svelte-package --input src/components

-o / --output

• 機能：処理されたファイルが書き込まれる出力ディレクトリを指定
• デフォルト値：dist
• 重要点：
• package.jsonのexportsはこのディレクトリ内のファイルを指す必要がある
• files配列にこのフォルダを含める必要がある
• 使用例：svelte-package --output build

-t / --types

• 機能：型定義ファイル（d.tsファイル）を作成するかどうかを指定
• デフォルト値：true
• 推奨：エコシステムのライブラリ品質を向上させるため、有効にすることを強く推奨
• 使用例：svelte-package --types

--tsconfig

• 機能：tsconfig または jsconfig へのパスを指定
• デフォルトの動作：指定がない場合、ワークスペースパスで上位のtsconfig/jsconfigを検索
• 使用例：svelte-package --tsconfig custom/tsconfig.json

使用例

# 基本的な使用方法
svelte-package

# 監視モードで実行
svelte-package --watch

# カスタムディレクトリの指定
svelte-package --input src/components --output lib

# 型定義なしでビルド
svelte-package --types false

# カスタムtsconfigの使用
svelte-package --tsconfig configs/tsconfig.custom.json

ベストプラクティス

1. 型定義の生成

• 特別な理由がない限り、--typesオプションは有効（デフォルト）のままにする
• これによりTypeScriptユーザーのための良好な開発体験を提供

1. ディレクトリ構造

• 標準的なディレクトリ構造（src/lib→dist）を可能な限り維持
• カスタマイズが必要な場合は、適切にpackage.jsonの設定も更新

1. 開発workflow

• 開発中は--watchオプションを使用して効率的な開発を行う
• 本番ビルドでは監視モードを外す

1. 設定ファイル

• TypeScript/JavaScript設定は可能な限りプロジェクトルートの標準的な場所に配置
• カスタム設定が必要な場合は--tsconfigオプションを使用

これらのオプションを適切に活用することで、効率的なパッケージ開発とビルドプロセスを実現できます。

おわりに

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