安装 Vite 或 Rollup 插件

Astro 构建在 Vite 之上，并支持 Vite 和 Rollup 插件。本秘诀使用 Rollup 插件添加在 Astro 中导入 YAML (.yml) 文件的功能。

¥Astro builds on top of Vite, and supports both Vite and Rollup plugins. This recipe uses a Rollup plugin to add the ability to import a YAML (.yml) file in Astro.

秘诀

标题部分 秘诀

¥Recipe

1. Install @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. Import the plugin in your astro.config.mjs and add it to the Vite plugins array:

   astro.config.mjs

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

3. Finally, you can import YAML data using an import statement:

   import yml from './data.yml';

   Note

   While you can now import YAML data in your Astro project, your editor will not provide types for the imported data. To add types, create or find an existing *.d.ts file in the src directory of your project and add the following:

   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;
   }

   This will allow your editor to provide type hints for your YAML data.