@astrojs/ svelte
このAstroインテグレーションは、Svelte 5コンポーネントのレンダリングとクライアントサイドハイドレーションを有効にします。Svelte 3および4のサポートについては、代わりに@astrojs/svelte@5をインストールしてください。
インストール
Section titled “インストール”Astroには、公式インテグレーションのセットアップを自動化するためのastro addコマンドが含まれています。もしよろしければ、手動でインテグレーションをインストールできます。
@astrojs/svelteをインストールするには、プロジェクトディレクトリから次のコマンドを実行し、プロンプトに従ってください。
npx astro add sveltepnpm astro add svelteyarn astro add svelte問題が発生した場合は、GitHubで報告してください。そして、以下の手動インストール手順を試してください。
手動インストール
Section titled “手動インストール”まず、@astrojs/svelteパッケージをインストールします。
npm install @astrojs/sveltepnpm add @astrojs/svelteyarn add @astrojs/svelteほとんどのパッケージマネージャーは、関連するピア依存関係もインストールします。Astroの起動時にCannot find package 'svelte'（または同様の）警告が表示される場合は、SvelteとTypeScriptをインストールする必要があります。
npm install svelte typescriptpnpm add svelte typescriptyarn add svelte typescript次に、integrationsプロパティを使用して、インテグレーションをastro.config.*ファイルに適用します。
import { defineConfig } from 'astro/config';import svelte from '@astrojs/svelte';
export default defineConfig({ // ... integrations: [svelte()],});そして、プロジェクトのルートディレクトリにsvelte.config.jsという新しいファイルを作成し、次のコードを追加します。
import { vitePreprocess } from '@astrojs/svelte';
export default { preprocess: vitePreprocess(),}Astroで最初のSvelteコンポーネントを使用するには、UIフレームワークのドキュメントにアクセスしてください。以下について探求します。
- 📦 フレームワークコンポーネントがどのように読み込まれるか
- 💧 クライアントサイドハイドレーションのオプション
- 🤝 フレームワークを混在させてネストする機会
このインテグレーションは@sveltejs/vite-plugin-svelteによって提供されています。Svelteコンパイラをカスタマイズするには、インテグレーションにオプションを指定できます。詳細については、@sveltejs/vite-plugin-svelteのドキュメントを参照してください。
astro.config.mjsのsvelteインテグレーションに渡すか、svelte.config.jsでオプションを設定できます。両方が存在する場合、astro.config.mjsのオプションがsvelte.config.jsのオプションよりも優先されます。
import { defineConfig } from 'astro/config';import svelte from '@astrojs/svelte';
export default defineConfig({ integrations: [svelte({ extensions: ['.svelte'] })],});export default { extensions: ['.svelte'],};Preprocessors
Section titled “Preprocessors”@astrojs/svelte@2.0.0
SvelteファイルでSCSSまたはStylusを使用している場合は、svelte.config.jsファイルを作成して、Svelteによって前処理され、Svelte IDE拡張機能がSvelteファイルを正しく解析できます。
import { vitePreprocess } from '@astrojs/svelte';
export default { preprocess: vitePreprocess(),};この設定ファイルは、astro add svelteを実行すると自動的に追加されます。vitePreprocessの詳細については、@sveltejs/vite-plugin-svelteのドキュメントを参照してください。
