Ein Leitfaden zur Erstellung eines Remark-Plugins, um die Lesedauer-Daten verfügbar zu machen, wenn MDX-Dateien als ES-Module importiert werden.
Remark ist ein leistungsstarker Markdown-Prozessor, der verwendet werden kann, um benutzerdefinierte Plugins zu erstellen, die Markdown-Inhalte transformieren. Beim Parsen von Markdown-Dateien mit Remark wird der Inhalt in einen abstrakten Syntaxbaum (AST) umgewandelt, der mithilfe von Plugins manipuliert werden kann.
Für eine bessere Benutzererfahrung ist es üblich, die geschätzte Lesedauer eines Artikels anzuzeigen. In diesem Leitfaden erstellen wir ein Remark-Plugin, um die Lesedauer-Daten aus einer MDX-Datei zu extrahieren und sie verfügbar zu machen, wenn die MDX-Datei als ES-Modul importiert wird.
Lassen Sie uns mit der Erstellung einer MDX-Datei beginnen:
Angenommen, wir verwenden Vite als Bundler, zusammen mit dem offiziellen @mdx-js/rollup-Plugin, um MDX-Dateien zu transformieren, sodass wir die MDX-Datei als ES-Modul importieren können. Die Vite-Konfiguration sollte folgendermaßen aussehen:
Wenn wir die MDX-Datei als ES-Modul importieren, wird der Inhalt ein Objekt mit der default-Eigenschaft sein, die das kompilierte JSX enthält. Zum Beispiel:
Das ergibt:
Sobald wir ein solches Ergebnis haben, können wir das Remark-Plugin erstellen.
Schauen wir uns an, was wir tun müssen, um das Ziel zu erreichen:
Glücklicherweise gibt es bereits Bibliotheken, die uns bei der Berechnung der Lesedauer und den grundlegenden AST-Operationen unterstützen:
reading-time, um die Lesedauer zu berechnen.mdast-util-to-string, um den MDX-AST in Text umzuwandeln.estree-util-value-to-estree, um die Lesedauer-Daten in einen ESTree-Knoten zu konvertieren.Falls du ein TypeScript-Benutzer bist, musst du möglicherweise auch diese Pakete installieren, um Typdefinitionen zu erhalten:
@types/mdast für die MDX-Root-Knoten-Typdefinitionen.unified für Plugin-Typdefinitionen.Sobald wir die Pakete installiert haben, können wir mit der Erstellung des Plugins beginnen:
Wie wir sehen können, extrahiert das Plugin einfach den MDX-Inhalt in Text und berechnet die Lesedauer. Jetzt müssen wir die Lesedauer-Daten an den MDX-Inhalt anhängen, und das scheint nicht so einfach zu sein. Aber wenn wir uns andere großartige Bibliotheken wie remark-mdx-frontmatter anschauen, finden wir eine Möglichkeit, es zu tun:
Beachte das type: 'mdxjsEsm' im obigen Code. Dies ist ein Knotentyp, der verwendet wird, um MDX-ESM zu serialisieren. Der obige Code hängt die Lesedauer-Daten unter dem Namen readingTime an den MDX-Inhalt an, was beim Import der MDX-Datei als ES-Modul das folgende Ergebnis liefert:
Falls du den Namen der Lesedauer-Daten ändern musst, kannst du die name-Eigenschaft des Identifier-Knotens aktualisieren.
Um das Plugin noch entwicklerfreundlicher zu gestalten, können wir einen letzten Feinschliff vornehmen, indem wir die MDX-Typdefinitionen erweitern:
Jetzt wird TypeScript beim Import der MDX-Datei die readingTime-Eigenschaft erkennen:
Ich hoffe, dieser Leitfaden hilft dir, eine bessere Erfahrung beim Arbeiten mit MDX-Dateien zu machen. Mit diesem Remark-Plugin kannst du die Lesedauer-Daten direkt nutzen und sogar ESM-Tree-Shaking für eine bessere Leistung nutzen.