컨텐츠로 이동

@astrojs/ svelte

v5.1.0 GitHub npm Changelog

이 Astro 통합 을 통해 Svelte 컴포넌트에 대한 서버 측 렌더링 및 클라이언트 측 하이드레이션이 가능해집니다. Svelte 3, 4 및 5 (실험적)를 지원합니다.

설치

섹션 제목: 설치

Astro에는 공식 통합 설정을 자동화하는 astro add 명령이 포함되어 있습니다. 원하는 경우 대신 통합을 수동으로 설치할 수 있습니다.

@astrojs/svelte를 설치하려면 프로젝트 디렉터리에서 다음을 실행하고 프롬프트를 따르세요.

Terminal window
npx astro add svelte

문제가 발생하면 GitHub에서 언제든지 보고하고 아래 수동 설치 단계를 시도해 보세요.

수동 설치

섹션 제목: 수동 설치

먼저 @astrojs/svelte 패키지를 설치하세요.

Terminal window
npm install @astrojs/svelte

대부분의 패키지 관리자는 관련 피어 종속성도 설치합니다. Astro를 시작할 때 “Cannot find package ‘svelte’” (또는 이와 유사한) 경고가 표시되면 Svelte를 설치해야 합니다.

Terminal window
npm install svelte

그런 다음 integrations 속성을 사용하여 astro.config.* 파일에 통합을 적용합니다.

astro.config.mjs
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 설정을 재정의합니다.

astro.config.mjs
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';


export default defineConfig({
  integrations: [svelte({ preprocess: [] })],
});
svelte.config.js
export default {
  preprocess: [],
};

TypeScript용 Intellisense

섹션 제목: TypeScript용 Intellisense
Added in: @astrojs/svelte@2.0.0

Svelte 파일에서 TypeScript 또는 SCSS와 같은 전처리기를 사용하는 경우 Svelte IDE 확장 프로그램이 Svelte 파일을 올바르게 구문 분석할 수 있도록 svelte.config.js 파일을 만들 수 있습니다.

svelte.config.js
import { vitePreprocess } from '@astrojs/svelte';


export default {
  preprocess: vitePreprocess(),
};

이 구성 파일은 astro add svelte를 실행할 때 자동으로 추가됩니다.

더 많은 통합

UI 프레임워크

SSR 어댑터

기타 통합