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 --save-dev

2. プラグインをastro.config.mjsにインポートし、Viteのplugins配列に追加します。

   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データの型ヒントを提供できるようになります。