こんにちは。よっしーです(^^)
今日は、SvelteKitにおいてSapperからの移行について解説しています。
背景
SvelteKitにおいてSapperからの移行について調査する機会がありましたので、その時の内容を備忘として記事に残しました。
Sapperからの移行について
SvelteKitはSapperの後継であり、その設計の多くの要素を共有しています。
既存のSapperアプリケーションをSvelteKitに移行する予定がある場合、いくつかの変更を加える必要があります。移行時に下記の例を参照すると役立つかもしれません。
- Sapperからの移行
- package.json
- プロジェクトファイル
- ページとレイアウト
- エンドポイント
- 統合
package.json
type: “module”
package.jsonに"type": "module"を追加してください。Sapper 0.29.3以降を使用している場合は、段階的な移行の一部として、この手順を他の作業と分けて実行することができます。
dependencies（依存関係）
polkaやexpressを使用している場合は、それらを削除してください。また、sirvやcompressionなどのミドルウェアも削除してください。
devDependencies（開発依存関係）
devDependenciesからsapperを削除し、代わりに@sveltejs/kitと使用予定のアダプター（次のセクションを参照）を追加してください。
scripts（スクリプト）
sapperを参照するスクリプトは以下のように更新する必要があります：
sapper buildは、Nodeアダプターを使用するvite buildに変更sapper exportは、静的アダプターを使用するvite buildに変更sapper devはvite devに変更node __sapper__/buildはnode buildに変更
解説
このセクションは、SapperからSvelteKitへの移行時に必要なpackage.jsonの変更点を詳細に説明しています。主なポイントは以下の通りです：
- モジュールシステムの変更：
"type": "module"の追加は、プロジェクトがES Modulesを使用することを示します- この変更は段階的に行うことができ、下位互換性が考慮されています
- 依存関係の整理：
- SapperではWebサーバーとして
polkaやexpressを使用していましたが、SvelteKitではこれらが不要になります - 関連するミドルウェアも同様に削除が必要です
- 開発依存関係の更新：
- 核となる変更は
sapperから@sveltejs/kitへの移行です - アダプターの概念が新しく導入されています
- スクリプトコマンドの変更：
- ビルドツールがSapperからViteに変更されています
- コマンド体系が大きく変更され、よりシンプルになっています
- デプロイメント方法によって使用するアダプターを選択する必要があります
この変更は、SvelteKitが新しいビルドシステム（Vite）を採用し、より柔軟なデプロイメントオプション（アダプター）を提供していることを示しています。また、より現代的なJavaScriptの機能（ES Modules）を標準で採用していることが分かります。
おわりに
今日は、 SvelteKitにおいてSapperからの移行について解説しました。
何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。
それでは、また明日お会いしましょう(^^)
コメント