Installation eines Vite- oder Rollup-Plugins

Astro baut auf Vite auf und unterstützt sowohl Vite- als auch Rollup-Plugins. Dieses Rezept verwendet ein Rollup-Plugin, um eine YAML-Datei (.yml) in Astro importieren zu können.

Rezept

Abschnitt betitelt Rezept

1. Installiere @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 --save-dev

2. Importiere das Plugin in deine astro.config.mjs und füge es dem Vite Plugins-Array hinzu:

   astro.config.mjs

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

3. Schließlich kannst du YAML-Daten mit einer Import-Anweisung importieren:

   import yml from './data.yml';

   Hinweis

   Du kannst jetzt zwar YAML-Daten in dein Astro-Projekt importieren, aber dein Editor stellt keine Typen für die importierten Daten bereit. Um Typen hinzuzufügen, erstelle oder suche eine vorhandene Datei *.d.ts im Verzeichnis src deines Projekts und füge Folgendes hinzu:

   src/files.d.ts

   // Specify the file extension you want to import
   declare module "*.yml" {
     const value: any; // Add type definitions here if desired
     export default value;
   }

   Dies ermöglicht es deinem Editor, Typ-Hinweise für deine YAML-Daten bereitzustellen.