Installare un plugin Vite o Rollup

Astro è basato su Vite, e supporta sia i plugin Vite che Rollup. Questa ricetta utilizza un plugin Rollup per aggiungere la possibilità di importare un file YAML (.yml) in Astro.

Ricetta

Sezione intitolata Ricetta

1. Installa @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. Importa il plugin nel tuo astro.config.mjs e aggiungilo all’array dei plugin Vite:

   astro.config.mjs

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

3. A questo punto, puoi importare i dati YAML utilizzando l’istruzione import:

   import yml from './data.yml';

   Nota

   Mentre puoi importare dati YAML nel tuo progetto Astro, il tuo editor non fornirà tipi per i dati importati. Per aggiungere i tipi, crea o trova un file *.d.ts esistente nella directory src del tuo progetto e aggiungi quanto segue:

   src/files.d.ts

   // Specifica l'estensione del file che vuoi importare
   declare module "*.yml" {
     const value: any; // Aggiungi le definizioni dei types qui se desideri
     export default value;
   }

   Questo permetterà al tuo editor di fornire suggerimenti sui types per i tuoi dati YAML.