Vite-Integration

Verwenden Sie @unifast/vite, um Markdown- und MDX-Dateien zur Build-Zeit zu kompilieren und direkt in Ihrer Vite-Anwendung zu importieren.

@unifast/vite stellt ein Vite-Plugin bereit, das Markdown- und MDX-Dateien zur Build-Zeit kompiliert. Importieren Sie .md- und .mdx-Dateien direkt in Ihrer Anwendung.

Installation

Einrichtung

Fügen Sie das Plugin zu Ihrer Vite-Konfiguration hinzu:

// vite.config.ts
import { defineConfig } from "vite";
import unifast from "@unifast/vite";

export default defineConfig({
  plugins: [
    unifast({
      // Optional: pass compile options
      plugins: [],
    }),
  ],
});

Markdown importieren

Nach der Konfiguration können Sie .md-Dateien direkt importieren:

import content from "./docs/getting-started.md";

console.log(content.html);         // Compiled HTML string
console.log(content.frontmatter);  // Parsed frontmatter
console.log(content.toc);          // Table of contents

Das importierte Modul stellt Folgendes bereit:

EigenschaftTypBeschreibung
htmlstringKompilierte HTML-Ausgabe
frontmatterRecord<string, unknown>Geparste Frontmatter-Metadaten
tocTocEntry[]Extrahiertes Inhaltsverzeichnis

Mit Plugins

Übergeben Sie Plugins über die Optionen des Vite-Plugins:

// vite.config.ts
import { defineConfig } from "vite";
import unifast from "@unifast/vite";
import { frontmatter, gfm, syntect } from "@unifast/node";

export default defineConfig({
  plugins: [
    unifast({
      plugins: [frontmatter(), gfm(), syntect()],
    }),
  ],
});

Alle Markdown-/MDX-Importe in Ihrem Projekt verwenden diese Plugins automatisch.

MDX-Unterstützung

MDX-Dateien werden zu JavaScript-Modulen mit einem standardmäßig exportierten React-Komponenten-Export kompiliert:

import Content from "./article.mdx";

function Page() {
  return <Content components={{ h1: MyHeading }} />;
}

Hot Module Replacement

Das Vite-Plugin unterstützt HMR. Wenn Sie eine .md- oder .mdx-Datei bearbeiten, wird die Seite ohne vollständiges Neuladen aktualisiert.

Siehe auch