Svelte入門：SvelteKitでの移行 -Vol.17-

今日は、SvelteKitでの移行について解説しています。

背景

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

依存関係の要件が更新されました

SvelteKit 2では、Node 18.13以上と、以下の最低限の依存関係バージョンが必要です：

• svelte@4
• vite@5
• typescript@5
• @sveltejs/vite-plugin-svelte@3（これは現在SvelteKitのpeerDependencyとして必要です — 以前は直接依存していました）
• @sveltejs/adapter-cloudflare@3（これらのアダプターを使用している場合）
• @sveltejs/adapter-cloudflare-workers@2
• @sveltejs/adapter-netlify@3
• @sveltejs/adapter-node@2
• @sveltejs/adapter-static@3
• @sveltejs/adapter-vercel@4

svelte-migrateがpackage.jsonを更新してくれます。

TypeScriptのアップグレードの一環として、生成されるtsconfig.json（あなたのtsconfig.jsonが継承するもの）は現在"moduleResolution": "bundler"（package.jsonのexportsマップからの型を適切に解決するため、TypeScriptチームによって推奨されています）とverbatimModuleSyntax（既存のimportsNotUsedAsValuesとpreserveValueImportsフラグを置き換えます — あなたのtsconfig.jsonにこれらがある場合は削除してください。svelte-migrateがこれを行ってくれます）を使用します。

解説

この変更は、SvelteKit 2における依存関係とTypeScript設定の重要な更新について説明しています：

1. 最小要件の更新：

• Node.js: 18.13以上が必要
• 主要な依存パッケージの必須バージョン：
• Svelte 4
• Vite 5
• TypeScript 5

1. アダプターの更新：

• 各種デプロイ用アダプターの最新バージョンが必要
• Cloudflare、Netlify、Node、Static、Vercelなどのアダプターが対象

1. 依存関係の構造変更：

• @sveltejs/vite-plugin-svelteがピア依存関係に変更
• より柔軟な依存関係管理が可能に

1. TypeScript設定の更新：

• moduleResolution: “bundler”
• TypeScriptチーム推奨の設定
• package.jsonのexportsマップからの型解決を改善
• verbatimModuleSyntaxの導入
• 古い設定を置き換え
• importsNotUsedAsValues
• preserveValueImports

1. 移行サポート：

• svelte-migrateツールが自動的に：
• package.jsonの更新
• tsconfig.jsonの設定変更
  を行ってくれます

これらの更新により：

より安定したビルドプロセス
が実現されます。

より新しい機能の活用

より良いタイプ解決

おわりに

今日は、 SvelteKitでの移行について解説しました。