add-yaml-support.mdx

title	description	i18nReady	type
安装一个 Vite 或 Rollup 插件	了解如何通过向项目添加 Rollup 插件来导入 YAML 数据。	true	recipe

import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Astro 基于 Vite 构建，并支持 Vite 和 Rollup 插件。该操作指南使用 Rollup 插件来添加在 Astro 中导入 YAML（.yml）文件的能力。

操作步骤

1. 安装 `@rollup/plugin-yaml`：

<PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm install @rollup/plugin-yaml --save-dev
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm add @rollup/plugin-yaml --save-dev
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn add @rollup/plugin-yaml --save-dev
    ```
    </Fragment>
</PackageManagerTabs>

2. 在 astro.config.mjs 中导入插件并将其添加到 Vite 插件数组中：

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

   :::note 当你在 Astro 项目中导入 YAML 数据时，你的编辑器将不会为导入的数据提供类型。要添加类型，请在项目的 src 目录中创建或查找现有的 *.d.ts 文件，并添加以下内容：

   // 指定要导入的文件扩展名
   declare module "*.yml" {
     const value: any; // 添加期望的类型定义
     export default value;
   }

   这将允许你的编辑器为 YAML 数据提供类型提示。 :::