Rspress 2.0 julkaistu: Kokemukseen ja AI:hin keskittyvä uusi päivitys

Olemme iloisia voidessamme ilmoittaa Rspress 2.0:n virallisesta julkaisusta!

Rspress on Rsbuild-pohjainen staattinen sivustogeneraattori, joka on suunniteltu dokumentaatiosivustojen työkaluksi kehittäjille. Vuodesta 2023 virallisesti julkaistuna Rspress 1.x on kerännyt yhteensä 144 versiota ja 125 osallistujaa on ollut mukana projektin kehittämisessä. Yhä useammat kehittäjät valitsevat Rspressin sen tehokkaan koodin käännösnopeuden, sopimusperusteisen reitityksen ja komponenttikirjaston esikatselun ansiosta, rakentaen kauniita ja luotettavia dokumentaatiosivustoja.

Yhteisön palautteen ja ehdotusten perusteella Rspress 2.0 vie asiat uudelle tasolle teeman kauneudessa, AI-native-ominaisuuksissa, dokumentaatiokehityskokemuksessa ja yhteensopivuudessa Rslibin kanssa.

Miksi Rspress 2.0

Rspress 1.x on jo ratkaissut dokumentaatiosivustojen kehysrakenteen käännösnopeuden ongelmat, mutta yhä on olemassa joitakin ongelmia, jotka vaikuttavat dokumentaatiotyökalun ydin kokemukseen. 2.0-versio ei keskity vain käännösnopeuden parantamiseen, vaan myös dokumentaatiosivuston kokemuksen muihin osa-alueisiin:

• Teeman tyyli: Uusi kauniimpi oletusteema, joka tarjoaa useita mukautusvaihtoehtoja, ratkaisee 1.x:n ongelmat teeman mukauttamisessa, jossa oli puutteita vakaassa API:ssa.
• AI-native: Dokumentaatio ei palvele vain ihmislukijoita, vaan sen on myös oltava Agentin helpommin ymmärrettävissä ja käytettävissä. Rspress sisältää nyt llms.txt:n luomisen ja SSG:stä johdetun SSG-MD-toiminnon, joka tuottaa korkealaatuista Markdown-renderöityä sisältöä Agentin luettavaksi.
• Käännös tarpeen mukaan, välitön käynnistys: Oletuksena käytössä on lazyCompilation, yhdessä linkkien hover-toiminnon kanssa, joka esilataa resursseja, rakennetaan tarvittavat tiedostot vain, kun tiettyä reittiä käytetään, mahdollistaen välittömän käynnistyksen riippumatta projektin koosta.
• Shiki-koodin korostus: Oletuksena integroitu Shiki, joka suorittaa syntaksin korostuksen rakentamisen aikana, tukee teeman vaihtoa, transformer-laajennuksia, kuten @rspress/plugin-twoslash, tuoden rikkaampia koodilohkojen esityksiä.
• Dokumentaatiokehityskokemus: Optimoi nav.json, meta.json jne. tiedostojen HMR:ää ja lisää json-skeeman IDE:n koodivihjeitä varten; oletuksena käytössä on kuolleiden linkkien tarkistus; lisää tiedostokoodilohkojen syntaksia, joka tukee ulkoisten tiedostojen viittauksia; @rspress/plugin-preview ja @rspress/plugin-playground tukevat samanaikaista käyttöä jne.
• Rslib-integraatio: Nyt voit valita Rspressin dokumentaatiotyökaluksi, kun käytät create-rslib:ia komponenttikirjastoprojektin luomiseen, rakentaaksesi nopeasti komponenttien dokumentaatiosivuston.

2.0 Uudet ominaisuudet

Uusi teema

2.0:n oletusteema on saanut järjestelmällisen päivityksen, jonka on suunnitellut tiimin suunnittelija @Zovn Wei, ja se on parantanut visuaalista ilmettä ja lukukokemusta merkittävästi, ja jokainen komponentti voidaan vaihtaa erikseen, mikä tarjoaa korkean mukautettavuuden.

Teeman mukautus

Mukautusasteen mukaan alhaisesta korkeaan on neljä erilaista tapaa mukauttaa teemaa: CSS-muuttujat, BEM-luokkien nimet, ESM-uudelleenvienti ja komponenttien eject.- CSS-muuttujat: Uusi teema paljastaa enemmän CSS-muuttujia, jotka kattavat teeman värit, koodilohkot, etusivun jne. Voit interaktiivisesti esikatsella ja säätää kaikkia CSS-muuttujia CSS-muuttujasivulla, ja kun löydät tyydyttävän asetuksen, voit suoraan kopioida sen projektiisi käytettäväksi.

• BEM-luokan nimet: Sisäänrakennetut komponentit käyttävät nyt BEM-nimityssääntöä. Tämä on hyvin vanhanaikainen valinta, mutta myös harkittu päätös. Käyttäjät voivat tarkasti säätää tyylejä CSS-valitsimien avulla, ja HTML-rakenne on selkeämpi.
• ESM-uudelleenvienti: Jos CSS-muutokset eivät täytä mukautustarpeita, voit tehdä syvempää mukautusta JS:n avulla. Käyttämällä ESM-uudelleenvientiä theme/index.tsx:ssä, voit ylittää minkä tahansa Rspressin sisäänrakennetun komponentin.
• Komponentin purku: Voit käyttää täysin uutta rspress eject [component] -komentoa, joka kopioi määritellyn komponentin lähdekoodin theme/components/ -hakemistoon, ja voit muokata näitä koodeja vapaasti, jopa antaa AI:lle muokattavaksi, saavuttaaksesi syvällisen mukautuksen.

Navigointipalkki, sivupalkki tag

Rspress 2.0 on toteuttanut Tag-komponentin, ja nyt voit käyttää frontmatterissa olevaa tag-ominaisuutta UI-merkintöjen tekemiseen sivupalkissa tai navigointipalkissa.

Sisäänrakennettu monikielinen tuki

Versiossa 1.x Rspress sisälsi vain englanninkielistä tekstiä, ja jos käytettiin muita kieliä, kuten zh, kaikkien tekstien konfigurointi oli tarpeen, mikä oli melko vaivalloista. Nyt 2.0-teema sisältää sisäänrakennettuja käännöstekstejä useille kielille, kuten zh, en, ja, ko, ru jne., ja järjestelmä suorittaa automaattisesti "Tree Shaking" kielikonfiguraation mukaan, pakaten vain käyttämäsi tekstit ja kielet.

llms.txt-tuki

Rspress on nyt integroinut llms.txt:n generointikyvyn ytimeen ja toteuttanut täysin uuden SSG-MD (Static Site Generation to Markdown, staattinen sivusto Markdown -generointi) -kyvyn.

React-pohjaisissa dynaamisesti renderöidyissä etupään kehyksissä on usein haasteena staattisten tietojen vaikea poiminta, ja Rspress kohtaa saman haasteen. Rspress sallii käyttäjien parantaa asiakirjojen ilmaisua MDX-lohkojen, React-komponenttien, Hooksien ja TSX-reittien dynaamisten ominaisuuksien avulla. Mutta nämä dynaamiset sisällöt kohtaavat seuraavat ongelmat muuntaessa Markdown-tekstiin:

• Suora MDX:n syöttäminen AI:lle sisältää runsaasti koodisyntaksin melua ja menettää React-komponenttien sisällön
• HTML:n muuntaminen Markdowniksi ei usein tuota hyviä tuloksia, ja tiedon laatu on vaikeaa taata

Tämän ongelman ratkaisemiseksi Rspress 2.0 tuo esiin SSG-MD-ominaisuuden. Tämä on täysin uusi toiminto, joka on samanlainen kuin staattinen sivuston generointi (SSG), mutta eroaa siinä, että se renderöi sivusi Markdown-tiedostoiksi eikä HTML-tiedostoiksi, ja luo llms.txt- ja llms-full.txt -liittyvät tiedostot.

Shiki-koodilohkojen korostusRspress 2.0 käyttää oletuksena Shiki-kirjastoa koodin korostamiseen. Verrattuna 1.x:n prism-ajan korostusratkaisuun, Shiki suorittaa korostuksen käännösvaiheessa.

• Tukee useita teema-tyylejä, kuten CSS-muuttujasivulla voit vuorovaikuttaa ja esikatsella erilaisia Shiki-teemoja.
• Samalla Shiki sallii mukautettujen muuntimien käytön laajentamiseen, kuten twoslash jne.
• Ohjelmointikieliä tuodaan tarpeen mukaan, mikä ei lisää ajonaikaista kuormitusta tai paketin kokoa.
• Perustuu TextMate-syntaksiin, joka tarjoaa tarkan syntaksikorostuksen, joka on yhdenmukainen VS Code:n kanssa.

Rakennus suorituskyvyn parantaminen

Rspress 2.0:n taustalla toimii Rsbuild ja Rspack 2.0:n esiversio, ja oletuksena on käytössä käännös tarpeen mukaan ja pysyvä välimuisti.

Käännös tarpeen mukaan

Oletuksena dev.lazyCompilation on käytössä, ja vain kun vierailet tietyllä sivulla, se käännetään, mikä parantaa kehityksen käynnistysnopeutta merkittävästi, jopa saavuttaen millisekunnin kylmäkäynnistyksen. Rspress toteuttaa myös reitityksen esilatausstrategian, jolloin kun hiiri on linkin päällä, kohdereitityssivua ladataan etukäteen, yhdistettynä lazyCompilationin kanssa, mikä mahdollistaa häviöttömän kehityskokemuksen.

Pysyvä välimuisti

2.0:ssa on myös oletuksena käytössä pysyvä välimuisti, joka hyödyntää edellisen käännöksen tuloksia kuumakäynnistyksessä, parantaen rakennusnopeutta 30%-60%. Tämä tarkoittaa, että ensimmäisen kerran rspress dev tai rspress build suorittamisen jälkeen, myöhemmät käynnistysnopeudet paranevat merkittävästi.

Dokumentaation kehityskokemus

Oletuksena käytössä kuolleiden linkkien tarkistus

Rspress 2.0:ssa on oletuksena käytössä kuolleiden linkkien tarkistus. Rakennusprosessin aikana se tarkistaa automaattisesti asiakirjoissa olevat virheelliset linkit, auttaen sinua havaitsemaan ja korjaamaan ne ajoissa.

Tiedostokoodilohkot

Voit käyttää file="./path/to/file" -attribuuttia viitataksesi ulkoisiin tiedostoihin koodilohkon sisällönä, pitäen esimerkkikoodit erillisissä tiedostoissa.

preview joustavampi meta-käyttö

@rspress/plugin-preview perustuu nyt meta-attribuuttiin, mikä tekee siitä joustavamman, ja se voidaan myös yhdistää tiedostokoodilohkoihin.

Rslib & Rspress

Kun käytät create-rslib -työkalua projektin luomiseen, voit nyt valita Rspress-työkalun. Tämä mahdollistaa komponenttikirjaston kehittämisen samalla, kun rakennat nopeasti siihen liittyvää dokumentaatiosivustoa, jota käytetään komponenttien käyttöohjeiden kirjoittamiseen, API-viitteiden esittelyyn tai komponenttien vaikutuksen reaaliaikaiseen esikatseluun.

Lisää Rspressin virallisia laajennuksia

Rspress 2.0:ssa on useita uusia virallisia laajennuksia:

• @rspress/plugin-algolia: tukee Rspressin sisäänrakennetun haun korvaamista Algolia DocSearchilla
• @rspress/plugin-twoslash: lisää tyyppivihjeitä TypeScript-koodilohkoihin
• @rspress/plugin-llms: tarjoaa llms.txt:n generointikyvyn projekteille, jotka eivät tue SSG:tä ja SSG-MD:tä
• @rspress/plugin-sitemap: luo automaattisesti Sitemap-tiedostoja SEO:n optimointia varten

Rikkovia muutoksia

Siirtyminen Rspress 1.x:stä

Jos olet 1.x-projektin käyttäjä, olemme valmistelleet yksityiskohtaisen siirtodokumentin, joka auttaa sinua päivittämään 1.x:stä 2.0:aan. Voit käyttää suoraan sivun "Kopioi Markdown" -toimintoa ja syöttää sen käyttämillesi koodausagentille (kuten Claude Code jne.) siirron suorittamiseksi.### Node.js ja ylävirran riippuvuuksien versio vaatimukset

Rspress 2.0 vaatii Node.js version 20+ ja React version 18+.

Seuraavat askeleet

Rspress 2.0:n julkaisu on vain uusi alku. Tämän julkaisun jälkeen Rspress tulee jatkuvasti kehittymään:

• Ekosysteemin integroinnin edistäminen: Syvempää yhdistämistä Rslibin ja Rstestin kanssa, tarjoten yhtenäisen kehityskokemuksen frontend-projekteille ja komponenttikirjastoille.
• AI:n ja dokumenttien syvempää integrointia tutkiminen: kuten älykäs kysymys-vastaus, automaattinen tiivistys jne.; SSG-MD:n parantaminen, jotta se olisi vakaampi ja helpompi käyttää.

Aloita tai päivitä Rspress 2.0:aan ja koe uusi dokumenttikehitysmatka!

npm create rspress@latest