Suomi
  • remark
  • mdx
  • lukuaika
  • esm

Luo remark-laajennos MDX-lukuaikojen uuttamiseksi

Opas remark-laajennoksen luomiseen, jotta lukuaikatiedot ovat käytettävissä, kun MDX-tiedostoja tuodaan ES-moduuleina.

Gao
Gao
Founder

Remark on tehokas markdown-käsittelijä, jota voidaan käyttää mukautettujen laajennosten luomiseen markdown-sisällön muuntamiseksi. Kun remark käsittelee markdown-tiedostoja, sisältö muunnetaan abstraktiksi syntaksipuuksi (AST), jota voidaan muokata laajennosten avulla.

Parempaa käyttäjäkokemusta varten on yleistä näyttää artikkelin arvioitu lukuaika. Tässä oppaassa luomme remark-laajennuksen, joka poimii lukuaikatiedot MDX-tiedostosta ja tekee ne saataville, kun MDX-tiedosto tuodaan ES-moduulina.

Aloita

Aloitetaan luomalla MDX-tiedosto:

Oletetaan, että käytämme Vitea pakettienhallitsijana, virallisen @mdx-js/rollup-laajennoksen avulla muuntamaan MDX-tiedostoja, joten voimme tuoda MDX-tiedoston ES-moduulina. Vite-konfiguraatio näyttää tältä:

Jos tuomme MDX-tiedoston ES-moduulina, sisältö on objekti, jonka default-ominaisuus sisältää käännetyn JSX:n. Esimerkiksi:

Tuottaa:

Kun meillä on tällainen tulos, olemme valmiita luomaan remark-laajennoksen.

Luo remark-laajennos

Tarkistetaan, mitä tarvitsemme tavoitteen saavuttamiseksi:

  1. Poimi MDX-sisältö tekstiksi lukuaikalaskentaa varten.
  2. Laske lukuaika.
  3. Kiinnitä lukuaikatiedot MDX-sisältöön, tee ne saataville, kun MDX-tiedosto tuodaan ES-moduulina.

Onneksi on jo olemassa kirjastoja, jotka auttavat lukuaikalaskennassa ja perus AST-toiminnoissa:

  • reading-time lukuaikalaskentaan.
  • mdast-util-to-string MDX AST:n muuntamiseen tekstiksi.
  • estree-util-value-to-estree lukuaikatietojen muuntamiseen ESTree-solmuksi.

Jos käytät TypeScriptiä, saatat myös tarvita asennamaan nämä paketit tyyppimäärittelyjä varten:

  • @types/mdast MDX-juurisolmujen tyyppimäärittelyihin.
  • unified laajennosten tyyppimäärittelyihin.

Kun paketit on asennettu, voimme aloittaa laajennoksen luomisen:

Kuten näemme, laajennos yksinkertaisesti poimii MDX-sisällön tekstiksi ja laskee lukujan. Nyt meidän täytyy liittää lukuaikatiedot MDX-sisältöön, ja se näyttääkaan ei ole niin suoraviivaista. Mutta jos katsomme muita upeita kirjastoja, kuten remark-mdx-frontmatter, voimme löytää tavan tehdä sen:

Huomaa tyypin 'mdxjsEsm' koodissa yllä. Tämä on solmutyyppi, jota käytetään MDX ESM:n sarjoittamiseen. Yllä oleva koodi liittää lukuaikatiedot käyttäen nimeä readingTime MDX-sisältöön, mikä tuottaa seuraavan tuloksen, kun MDX-tiedosto tuodaan ES-moduulina:

Jos sinun täytyy muuttaa lukuaikatietojen nimeä, voit päivittää Identifier-solmun name-ominaisuutta.

TypeScript-tuki

Tehdäksemme laajennoksesta vieläkin kehittäjäystävällisemmän, voimme tehdä yhden viimeisen kosketuksen täydentämällä MDX:n tyyppimäärittelyjä:

Nyt, kun tuomme MDX-tiedoston, TypeScript tunnistaa ominaisuuden readingTime:

Yhteenveto

Toivon, että tämä opas auttaa sinua saamaan paremman kokemuksen työskennellessäsi MDX-tiedostojen kanssa. Tämän remark-laajennoksen avulla voit käyttää lukuaikatietoja suoraan ja hyödyntää jopa ESM-puunsiirtelyä paremman suorituskyvyn saavuttamiseksi.