Svelte入門：Sapperからの移行 -Vol.3-

今日は、SvelteKitにおいてSapperからの移行について解説しています。

背景

SvelteKitにおいてSapperからの移行について調査する機会がありましたので、その時の内容を備忘として記事に残しました。

Sapperからの移行について

SvelteKitはSapperの後継であり、その設計の多くの要素を共有しています。
既存のSapperアプリケーションをSvelteKitに移行する予定がある場合、いくつかの変更を加える必要があります。移行時に下記の例を参照すると役立つかもしれません。

• Sapperからの移行
• package.json
• プロジェクトファイル
• ページとレイアウト
• エンドポイント
• 統合

プロジェクトファイル

src/routes内のアプリケーションの主要部分はそのままで構いませんが、いくつかのプロジェクトファイルは移動または更新が必要です。

設定

webpack.config.jsまたはrollup.config.jsは、ここに記載されている通りsvelte.config.jsに置き換える必要があります。Svelteのプリプロセッサーオプションはconfig.preprocessに移動する必要があります。

アダプターを追加する必要があります。sapper buildはだいたいadapter-nodeに相当し、sapper exportはだいたいadapter-staticに相当します。ただし、デプロイ先のプラットフォーム用に設計されたアダプターを使用することをお勧めします。

Viteで自動的に処理されないファイルタイプ用のプラグインを使用していた場合は、Vite用の同等のプラグインを見つけてVite設定に追加する必要があります。

src/client.js

このファイルはSvelteKitには相当するものがありません。カスタムロジック（sapper.start(...)以外）は、+layout.svelteファイル内のonMountコールバック内で表現する必要があります。

src/server.js

adapter-nodeを使用する場合、相当するのはカスタムサーバーです。それ以外の場合、SvelteKitアプリケーションはサーバーレス環境で実行できるため、このファイルに直接相当するものはありません。

src/service-worker.js

@sapper/service-workerからのほとんどのインポートには$service-workerに相当するものがあります：

• filesは変更なし
• routesは削除されました
• shellは現在buildになっています
• timestampは現在versionになっています

src/template.html

src/template.htmlファイルはsrc/app.htmlに名前を変更する必要があります。

%sapper.base%、%sapper.scripts%、%sapper.styles%を削除してください。%sapper.head%を%sveltekit.head%に、%sapper.html%を%sveltekit.body%に置き換えてください。<div id="sapper">は不要になりました。

src/node_modules

Sapperアプリケーションでは、内部ライブラリをsrc/node_modules内のディレクトリに配置するのが一般的なパターンでした。これはViteでは機能しないため、代わりにsrc/libを使用します。

解説

このセクションは、プロジェクトの構造と設定に関する重要な変更点を説明しています。

主なポイントは：

1. ビルドシステムの変更：

• WebpackやRollupからViteへの移行
• 設定ファイルの構造が大きく変更
• プラグインシステムの違いへの対応が必要

1. ファイル構造の近代化：

• より明確なプロジェクト構造への移行
• サーバーレス環境への対応
• 内部ライブラリの配置場所の標準化

1. テンプレート構文の変更：

• より簡潔な構文への移行
• 不要な要素の削除

1. ServiceWorkerの更新：

• より単純化されたAPI
• 古い機能の削除と新機能の追加

これらの変更は、SvelteKitがより現代的なウェブ開発の実践に合わせて設計されていることを示しています。特に、サーバーレス環境のサポートやより単純化されたプロジェクト構造への移行が強調されています。

おわりに

今日は、 SvelteKitにおいてSapperからの移行について解説しました。