Svelte原生支持JSON文件导入，如何实现YAML文件导入？

Svelte原生仅支持JSON文件导入，要实现YAML文件的直接导入，需要借助构建工具插件解析YAML内容，下面分两种常见项目场景说明：

1. Vite/SvelteKit 项目 #

Vite生态有专门的插件处理YAML，步骤如下：

• 安装依赖：

  npm install --save-dev vite-plugin-yaml
  

• 修改vite.config.js（或vite.config.ts），注册插件：

  import { sveltekit } from '@sveltejs/kit/vite';
  import yaml from 'vite-plugin-yaml';
  
  /** @type {import('vite').UserConfig} */
  const config = {
    plugins: [sveltekit(), yaml()]
  };
  
  export default config;
  

2. Rollup 搭建的传统Svelte项目 #

使用Rollup官方的YAML插件：

• 安装依赖：

  npm install --save-dev @rollup/plugin-yaml
  

• 修改rollup.config.js，添加插件：

  import svelte from 'rollup-plugin-svelte';
  import yaml from '@rollup/plugin-yaml';
  
  export default {
    input: 'src/main.js',
    output: {
      file: 'public/build/bundle.js',
      format: 'iife'
    },
    plugins: [
      svelte(),
      yaml()
    ]
  };
  

导入使用示例 #

配置完成后，就可以像导入JSON一样直接导入YAML文件：

<script>
  import data from './data.yml';
  console.log(data); // YAML内容会被解析为JS对象
</script>

注意：确保你的data.yml文件路径正确，且文件格式符合YAML规范。

内容的提问来源于stack exchange，提问作者Yukulélél