@astrojs/ svelte
이 Astro 통합 을 통해 Svelte 5 컴포넌트에 대한 렌더링 및 클라이언트 측 하이드레이션이 가능해집니다. Svelte 3 및 4를 지원하려면 @astrojs/svelte@5를 설치하세요.
Astro에는 공식 통합 설정을 자동화하는 astro add 명령이 포함되어 있습니다. 원하는 경우 대신 통합을 수동으로 설치할 수 있습니다.
@astrojs/svelte를 설치하려면 프로젝트 디렉터리에서 다음을 실행하고 프롬프트를 따르세요.
npx astro add sveltepnpm astro add svelteyarn astro add svelte문제가 발생하면 GitHub에서 언제든지 보고하고 아래 수동 설치 단계를 시도해 보세요.
수동 설치
섹션 제목: 수동 설치먼저 @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'],};전처리기
섹션 제목: 전처리기@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 문서를 참조하세요.
