Vite 또는 Rollup 플러그인 설치

Astro는 Vite를 기반으로 구축되었으며 Vite 및 Rollup 플러그인을 모두 지원합니다. 이 레시피는 Rollup 플러그인을 사용하여 Astro에서 YAML (.yml) 파일을 가져오는 기능을 추가합니다.

레시피

1. @rollup/plugin-yaml을 설치합니다.

   npm

   npm install @rollup/plugin-yaml --save-dev

   pnpm

   pnpm add @rollup/plugin-yaml --save-dev

   Yarn

   yarn add @rollup/plugin-yaml --dev

2. astro.config.mjs 파일에서 플러그인을 가져와 Vite 플러그인 배열에 추가합니다.

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   import yaml from '@rollup/plugin-yaml';
   
   export default defineConfig({
     vite: {
       plugins: [yaml()]
     }
   });

3. 마지막으로 import 문을 사용하여 YAML 데이터를 가져올 수 있습니다.

   import yml from './data.yml';

   참고

   이제 Astro 프로젝트에서 YAML 데이터를 가져올 수 있지만 편집기는 가져온 데이터에 대한 타입을 제공하지 않습니다. 타입을 추가하려면 프로젝트의 src 디렉터리에서 기존 *.d.ts 파일을 만들거나 찾아서 다음을 추가하세요.

   src/files.d.ts

   // 가져올 파일 확장자를 지정하세요.
   declare module "*.yml" {
     const value: any; // 원하는 경우 여기에 타입 정의를 추가하세요.
     export default value;
   }

   이렇게 하면 편집기에서 YAML 데이터에 대한 타입 힌트를 제공할 수 있습니다.