基于md文件构建Svelte-Kit静态页面触发build错误的问题咨询

问题原因 #

这个报错是因为parse-md为CommonJS规范的包，SvelteKit构建阶段的ES模块加载逻辑不会自动兼容CommonJS的默认导出，你用默认导入拿到的实际是包含default属性的封装对象，并非解析函数本身，开发环境的兼容逻辑掩盖了这个问题，所以只有构建时会报错。

解决方案 #

方案1：修复导入语法（可引入第三方库时使用） #

将index.json.js中的导入语句调整为以下两种写法之一即可：

// 写法1：显式取default导出
import { default as parseMD } from "parse-md";
// 写法2：整体导入后调用default属性
import * as parseMD from "parse-md";
// 调用时改为
const pageData = parseMD.default(fileContents);

方案2：不引入第三方库的实现方式 #

如果限制*.json.js不能引入第三方依赖，可选两种实现路径：

• 路径A：前置构建脚本预解析MD

  提前写一个独立的Node脚本，在SvelteKit构建执行前先把所有MD文件解析为JSON存入项目目录，index.json.js直接读取预生成的JSON即可，不需要引入任何依赖：

  1. 项目根目录新建prebuild.js

  import fs from 'fs'
  import parseMD from 'parse-md'
  
  // 解析所有MD文件输出为JSON
  const mdContent = fs.readFileSync('content/pages/home.md', 'utf8')
  const parsedData = parseMD(mdContent)
  fs.writeFileSync('src/generated/home.json', JSON.stringify(parsedData))
  

  2. 修改package.json的构建命令：

  "scripts": {
    "build": "node prebuild.js && vite build"
  }
  

  3. 修改index.json.js逻辑：

  import fs from "fs";
  
  export function get() {
    const pageData = JSON.parse(fs.readFileSync("src/generated/home.json", "utf8"));
    return { body: JSON.stringify(pageData) }
  }
  

• 路径B：自研极简MD解析逻辑

  如果仅需要拆分MD的Frontmatter元数据和正文内容，几十行正则即可实现等价功能，完全不需要第三方库：

  import fs from "fs";
  
  // 极简MD解析函数，支持Frontmatter拆分
  function parseCustomMD(content) {
    const frontMatterMatch = content.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/)
    if (!frontMatterMatch) return { metadata: {}, content }
    const metadata = {}
    frontMatterMatch[1].split('\n').forEach(line => {
      const [key, ...valParts] = line.split(':')
      if (key && valParts.length) metadata[key.trim()] = valParts.join(':').trim()
    })
    return { metadata, content: frontMatterMatch[2] }
  }
  
  export function get() {
    const fileContents = fs.readFileSync("content/pages/home.md", "utf8");
    const pageData = parseCustomMD(fileContents);
    return { body: JSON.stringify(pageData) }
  }
  

额外提示 #

你提供的index.svelte代码存在语法错误，then((r) = r.json())缺少箭头函数的右尖括号，需改为then((r) => r.json())，否则运行时会触发语法报错。

内容的提问来源于stack exchange，提问作者Hancs