@astrojs/ svelte
이 Astro 통합 을 통해 Svelte 컴포넌트에 대한 서버 측 렌더링 및 클라이언트 측 하이드레이션이 가능해집니다. Svelte 3, 4 및 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를 설치해야 합니다.
npm install sveltepnpm add svelteyarn add svelte그런 다음 integrations 속성을 사용하여 astro.config.* 파일에 통합을 적용합니다.
import { defineConfig } from 'astro/config';import svelte from '@astrojs/svelte';
export default defineConfig({ // ... integrations: [svelte()],});시작하기
섹션 제목: 시작하기Astro에서 첫 번째 Svelte 컴포넌트를 사용하려면 UI 프레임워크 문서로 이동하세요. 다음을 탐색하게 됩니다.
- 📦 프레임워크 구성요소가 로드되는 방식,
- 💧 클라이언트 측 하이드레이션 옵션
- 🤝 프레임워크를 함께 혼합하고 중첩할 수 있는 기회
이 통합은 @sveltejs/vite-plugin-svelte에 의해 제공됩니다. Svelte 컴파일러를 사용자 정의하기 위해 통합에 옵션을 제공할 수 있습니다. 자세한 내용은 @sveltejs/vite-plugin-svelte 문서를 참조하세요.
기본 옵션
섹션 제목: 기본 옵션이 통합은 다음 기본 옵션을 Svelte 컴파일러에 전달합니다.
const defaultOptions = { emitCss: true, compilerOptions: { dev: isDev, hydratable: true }, preprocess: vitePreprocess(),};이러한 emitCss, compilerOptions.dev 및 compilerOptions.hydratable 값은 Astro를 올바르게 빌드하는 데 필요하며 재정의될 수 없습니다.
자체 preprocess 옵션을 제공하면 vitePreprocess() 기본값이 무시됩니다. 프로젝트에 필요한 전처리기 플래그를 활성화했는지 확인하세요.
astro.config.mjs 또는 svelte.config.js 파일의 svelte 통합에 옵션을 전달하여 옵션을 설정할 수 있습니다. 다음 중 하나는 기본 preprocess 설정을 재정의합니다.
import { defineConfig } from 'astro/config';import svelte from '@astrojs/svelte';
export default defineConfig({ integrations: [svelte({ preprocess: [] })],});export default { preprocess: [],};TypeScript용 Intellisense
섹션 제목: TypeScript용 Intellisense@astrojs/svelte@2.0.0
Svelte 파일에서 TypeScript 또는 SCSS와 같은 전처리기를 사용하는 경우 Svelte IDE 확장 프로그램이 Svelte 파일을 올바르게 구문 분석할 수 있도록 svelte.config.js 파일을 만들 수 있습니다.
import { vitePreprocess } from '@astrojs/svelte';
export default { preprocess: vitePreprocess(),};이 구성 파일은 astro add svelte를 실행할 때 자동으로 추가됩니다.
