Opas remark-laajennoksen luomiseen, jotta lukuaikatiedot ovat käytettävissä, kun MDX-tiedostoja tuodaan ES-moduuleina.
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.
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.
Tarkistetaan, mitä tarvitsemme tavoitteen saavuttamiseksi:
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.
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:
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.