Polski
  • remark
  • mdx
  • czas-czytania
  • esm

Utwórz wtyczkę remark do wyodrębniania czasu czytania MDX

Przewodnik po tworzeniu wtyczki remark, która udostępni dane o czasie czytania podczas importowania plików MDX jako modułów ES.

Gao
Gao
Founder

Remark to potężny procesor markdown, który można wykorzystać do tworzenia niestandardowych wtyczek do przekształcania treści markdown. Podczas parsowania plików markdown przy użyciu remark, treść jest przekształcana w abstrakcyjne drzewo składniowe (AST), które można manipulować za pomocą wtyczek.

Dla lepszego doświadczenia użytkownika, często wyświetla się szacunkowy czas czytania artykułu. W tym przewodniku stworzymy wtyczkę remark, aby wyodrębnić dane o czasie czytania z pliku MDX i udostępnić je podczas importowania pliku MDX jako modułu ES.

Rozpocznijmy

Zacznijmy od stworzenia pliku MDX:

Zakładając, że używamy Vite jako bundlera, z oficjalną wtyczką @mdx-js/rollup do przekształcania plików MDX, możemy zaimportować plik MDX jako moduł ES. Konfiguracja Vite powinna wyglądać tak:

Jeśli zaimportujemy plik MDX jako moduł ES, treść będzie obiektem, którego właściwość default zawiera skompilowany JSX. Na przykład:

Wynik będzie wyglądać następująco:

Gdy już mamy taki wynik, jesteśmy gotowi, aby stworzyć wtyczkę remark.

Tworzenie wtyczki remark

Zobaczmy, co musimy zrobić, aby osiągnąć cel:

  1. Wyodrębnić treść MDX do tekstu, aby obliczyć czas czytania.
  2. Obliczyć czas czytania.
  3. Dołączyć dane o czasie czytania do treści MDX, aby były dostępne podczas importowania pliku MDX jako modułu ES.

Na szczęście istnieją już biblioteki, które pomogą nam w obliczeniu czasu czytania i podstawowych operacjach na AST:

  • reading-time do obliczania czasu czytania.
  • mdast-util-to-string do konwertowania AST MDX na tekst.
  • estree-util-value-to-estree do konwertowania danych o czasie czytania na węzeł ESTree.

Jeśli jesteś użytkownikiem TypeScript, być może będziesz musiał również zainstalować te paczki dla definicji typów:

  • @types/mdast dla definicji typów węzła głównego MDX.
  • unified dla definicji typów wtyczki.

Kiedy mamy już zainstalowane paczki, możemy przystąpić do tworzenia wtyczki:

Jak widać, wtyczka po prostu wyodrębnia treść MDX do tekstu i oblicza czas czytania. Teraz musimy dołączyć dane o czasie czytania do treści MDX i wygląda to na dość skomplikowane. Ale jeśli przyjrzymy się innym wspaniałym bibliotekom, takim jak remark-mdx-frontmatter, możemy znaleźć sposób na to:

Zwróć uwagę na type: 'mdxjsEsm' w powyższym kodzie. Jest to typ węzła używany do serializacji MDX ESM. Powyższy kod dołącza dane o czasie czytania za pomocą nazwy readingTime do treści MDX, co przyniesie następujący wynik po zaimportowaniu pliku MDX jako modułu ES:

Jeśli potrzebujesz zmienić nazwę danych o czasie czytania, możesz zaktualizować właściwość name węzła Identifier.

Wsparcie dla TypeScript

Aby uczynić wtyczkę jeszcze bardziej przyjazną dla developerów, możemy wprowadzić ostatni szlif, rozszerzając definicje typów MDX:

Teraz, po zaimportowaniu pliku MDX, TypeScript rozpozna właściwość readingTime:

Wniosek

Mam nadzieję, że ten przewodnik pomoże ci w lepszym doświadczeniu podczas pracy z plikami MDX. Dzięki tej wtyczce remark, możesz bezpośrednio korzystać z danych o czasie czytania, a nawet skorzystać z tree-shaking ESM dla lepszej wydajności.