Svelte入門：SvelteKitのよくある質問 -Vol.3-

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

背景

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

パッケージを含めようとしてエラーが発生した場合、どうすれば修正できますか？

ライブラリの組み込みに関する問題のほとんどは、不適切なパッケージングが原因です。ライブラリのパッケージングがNode.jsと互換性があるかどうかは、publintウェブサイトに入力して確認できます。

ライブラリが正しくパッケージングされているかを確認する際の注意点：

• exportsは、mainやmoduleなどの他のエントリーポイントフィールドよりも優先されます。exportsフィールドを追加すると、ディープインポートが禁止されるため、下位互換性が失われる可能性があります。
• "type": "module"が設定されていない限り、ESMファイルは.mjsで終わる必要があります。その場合、CommonJSファイルは.cjsで終わる必要があります。
• exportsが定義されていない場合は、mainを定義する必要があります。これはCommonJSまたはESMファイルのいずれかで、前述の箇条書きに従う必要があります。moduleフィールドが定義されている場合、それはESMファイルを参照する必要があります。
• Svelteコンポーネントは、パッケージ内のJSがESMのみで書かれた、コンパイルされていない.svelteファイルとして配布される必要があります。TypeScriptやSCSSなどのカスタムスクリプトやスタイル言語は、それぞれバニラJSとCSSとしてプリプロセスされる必要があります。Svelteライブラリのパッケージングにはsvelte-packageの使用を推奨します。これらの処理を自動的に行ってくれます。

ライブラリは、特にSvelteコンポーネントライブラリの依存関係である場合、ESMバージョンを配布するとViteでブラウザでの動作が最適になります。ライブラリの作者にESMバージョンの提供を提案することをお勧めします。ただし、デフォルトではvite-plugin-svelteがViteに対してESMに変換するためにesbuildを使用してプリバンドルするように要求するため、CommonJS（CJS）の依存関係も動作するはずです。

まだ問題が発生している場合は、Viteのイシュートラッカーとそのライブラリのイシュートラッカーの両方を検索することをお勧めします。問題によってはoptimizeDepsやssrの設定値を調整することで回避できる場合がありますが、これは対象のライブラリを修正することを優先する一時的な回避策としてのみ推奨します。

解説

重要なポイントを解説していきます：

1. 問題の本質

• ほとんどのパッケージ関連のエラーは、パッケージングの問題に起因する
• publintウェブサイトを使用して互換性を確認できる

1. パッケージングの主要なルール

• エントリーポイントの優先順位:
  • exportsが最優先
  • mainとmoduleは二次的
• ファイル拡張子の規則:
  • ESM: .mjs（type: “module”がない場合）
  • CommonJS: .cjs
• mainフィールドの要件:
  • exportsがない場合は必須
  • CommonJSまたはESMファイルを指定

1. Svelteコンポーネントの特別な要件

• .svelteファイルは未コンパイルで配布
• JavaScriptはESMのみを使用
• TypeScriptやSCSSは標準的なJS/CSSに変換が必要
• svelte-packageツールの使用を推奨

1. Viteとの互換性

• ESMバージョンが推奨される
• CommonJSもvite-plugin-svelteにより自動変換される
• esbuildを使用してESMに変換

1. トラブルシューティング方法

• Viteのイシュートラッカーを確認
• ライブラリのイシュートラッカーを確認
• 設定による一時的な回避策:
  • optimizeDepsの調整
  • ssrの設定変更

1. ベストプラクティス

• ライブラリ作者にESMバージョンの提供を提案
• 一時的な回避策よりも根本的な解決を推奨

モダンなJavaScript開発環境における依存関係管理の複雑さと、SvelteKitでの適切なパッケージング方法について包括的に説明しています。特に、ESモジュールへの移行期における互換性の問題と、その解決方法に焦点を当てています。

おわりに

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