Rspress 2.0 izdaja: popolna nadgradnja usmerjena na izkušnje in AI
Rspress 2.0 izdaja: popolna nadgradnja usmerjena na izkušnje in AI
Z veseljem napovedujemo uradno izdajo Rspress 2.0!
Rspress je statični generator spletnih strani, ki temelji na Rsbuild, zasnovan kot orodje za dokumentacijo za razvijalce. Od uradne izdaje leta 2023 je Rspress 1.x skupno iteriral 144 različic, s 125 prispevitelji, ki so sodelovali pri razvoju projekta. Čedalje več razvijalcev izbira Rspress, saj z njegovo učinkovito zmogljivostjo prevajanja, konvencionalnim usmerjanjem in predogledom knjižnice komponent gradijo privlačne in zanesljive dokumentacijske strani.
Na podlagi povratnih informacij in predlogov skupnosti je Rspress 2.0 naredil korak naprej na področju privlačnosti tem, AI-native, izkušnje pri razvoju dokumentacije in uporabe skupaj z Rslib.
Zakaj Rspress 2.0
Rspress 1.x je že rešil težave z zmogljivostjo prevajanja okvira dokumentacijskih strani, vendar še vedno obstajajo nekateri problemi, ki vplivajo na osnovno izkušnjo kot orodja za razvoj dokumentacije. Različica 2.0 se ne osredotoča le na iskanje boljše zmogljivosti prevajanja, temveč se osredotoča tudi na druge vidike izkušnje dokumentacijskih strani:
- Slog teme: niz lepših privzetih tem, ki ponujajo različne možnosti za prilagoditev, kar rešuje problem pomanjkanja stabilnega API-ja za prilagoditev tem v 1.x.
- AI-native: dokumenti ne služijo le človeškim bralcem, temveč jih morajo tudi agenti bolje razumeti in uporabljati. Rspress zdaj vključuje funkcionalnost generiranja llms.txt in SSG-MD, ki izhaja iz SSG, za generiranje visokokakovostne vsebine Markdown za branje agentov.
- Prevajanje po potrebi, takojšnje zagon: privzeto omogoča lazyCompilation, skupaj s funkcijo prednalaganja virov ob lebdenju povezav, gradi potrebne datoteke le ob dostopu do določenih poti, kar omogoča, da se dev takoj zažene, ne glede na velikost projekta.
- Shiki poudarjanje kode: privzeto integrira Shiki, ki zaključi sintaktično poudarjanje med gradnjo, podpira preklapljanje tem, razširitve transformerjev, kot je @rspress/plugin-twoslash, kar prinaša bogatejše učinke prikaza blokov kode.
- Izkušnja pri razvoju dokumentacije: optimizira HMR za datoteke nav.json, meta.json in dodaja json shemo za namige kode v IDE; privzeto omogoča preverjanje mrtvih povezav; dodaja sintakso za blok kode datotek, ki podpira sklicevanje na zunanje datoteke; @rspress/plugin-preview in @rspress/plugin-playground podpirata sočasno uporabo itd.
- Integracija Rslib: zdaj lahko ob uporabi create-rslib za ustvarjanje projektov knjižnice komponent izberete Rspress kot orodje za dokumentacijo, hitro zgradite dokumentacijsko stran komponent.
2.0 nove funkcije
Povsem nova tema
Privzeta tema 2.0 je doživela sistematično nadgradnjo, ki jo je celovito zasnoval oblikovalec ekipe @Zovn Wei, kar je prineslo znatno izboljšanje vizualnih učinkov in izkušnje branja, pri čemer je vsak komponent mogoče neodvisno zamenjati, kar zagotavlja visoko prilagodljivost.
Prilagoditev teme
Po stopnji prilagoditve od nizke do visoke so na voljo štiri možnosti prilagoditve teme: CSS spremenljivke, BEM imena razredov, ESM ponovno izvoz pokrivanja, izmet komponent.- CSS spremenljivke: Nova tema razkriva več CSS spremenljivk, ki pokrivajo teme barv, sloge kode, domačo stran in še več. Vse CSS spremenljivke lahko interaktivno predogledate in prilagodite na strani CSS spremenljivk, po tem, ko najdete zadovoljivo konfiguracijo, jo lahko neposredno kopirate v svoj projekt.
- BEM imena razredov: Vgrajeni komponenti zdaj uporabljajo BEM poimenovalni standard. To je zelo Old School izbira, a tudi dobro premišljena odločitev. Uporabniki lahko natančno prilagodijo sloge s CSS selektorji, struktura HTML pa je bolj jasna.
- ESM ponovno izvoz pokriva: Če spremembe na CSS ne zadostujejo potrebam po prilagoditvi, lahko izvedete globlje prilagoditve preko JS. V datoteki theme/index.tsx lahko z uporabo ESM ponovnega izvoza prekrijete katerokoli vgrajeno komponento Rspress.
- Eject komponent: Uporabite lahko povsem novo ukaz rspress eject [component], ki bo kopiral izvorno kodo določene komponente v mapo theme/components/, kjer lahko prosto spreminjate to kodo, celo jo prepustite AI, da izvede globoko prilagoditev.
Navigacijska vrstica, stranska vrstica tag
Rspress 2.0 je implementiral komponento Tag, zdaj lahko uporabite lastnost tag v frontmatter, da označite UI v stranski ali navigacijski vrstici.
Vgrajena podpora za več jezikov
V različici 1.x je Rspress vključeval le angleško besedilo, če ste želeli uporabiti druge jezike, kot je zh, ste morali konfigurirati vse besedilo, kar je bilo precej zapleteno. Zdaj tema 2.0 vključuje prevode v več jezikih, kot so zh, en, ja, ko, ru itd., sistem pa bo samodejno izvedel "Tree Shaking" glede na jezikovno konfiguracijo, in pakiral le besedilo in jezike, ki jih uporabljate.
llms.txt podpora
Rspress zdaj integrira zmožnost generiranja llms.txt v jedro in implementira novo sposobnost SSG-MD (Static Site Generation to Markdown, generiranje statičnih strani v Markdown).
V prednjih okvirih, ki dinamično upodabljajo React, pogosto obstajajo težave z izvlečenjem statičnih informacij, Rspress se sooča s podobnimi izzivi. Rspress omogoča uporabnikom, da povečajo izraznost dokumentov preko MDX fragmentov, React komponent, Hooks in TSX usmeritev ter drugih dinamičnih lastnosti. Vendar se ti dinamični vsebini pri pretvorbi v Markdown besedilo soočajo z naslednjimi težavami:
- Neposredno posredovanje MDX AI bo vsebovalo veliko kode in izgubilo vsebino React komponent
- Pretvorba HTML v Markdown pogosto ne daje dobrih rezultatov, kakovost informacij pa je težko zagotoviti
Da bi rešili ta problem, Rspress 2.0 uvaja funkcijo SSG-MD. To je povsem nova funkcionalnost, ki je podobna statičnemu generiranju strani (SSG), vendar se razlikuje v tem, da vašo stran upodablja kot Markdown datoteko, namesto HTML datoteke, in generira datoteke llms.txt in llms-full.txt.
Shiki prevajanje za poudarjanje kodeRspress 2.0 privzeto uporablja Shiki za poudarjanje kode. V primerjavi s 1.x rešitvijo za poudarjanje v času izvajanja prism, Shiki obdeluje poudarjanje med prevajanjem.
- Podpira različne teme, na primer na strani CSS spremenljivk lahko interaktivno preklapljate in predogledate različne Shiki teme.
- Hkrati Shiki omogoča uporabo prilagojenih transformatorjev za razširitev pisanja, na primer twoslash itd.
- Uporablja se po potrebi za programske jezike, ne povečuje stroškov izvajanja in velikosti paketa.
- Na podlagi sintakse TextMate zagotavlja natančno poudarjanje sintakse, ki je skladno z VS Code.
### Izboljšanje zmogljivosti gradnje
Rspress 2.0 temelji na Rsbuild in Rspack 2.0 predogledni različici, hkrati pa privzeto omogoča prevajanje po potrebi in trajno predpomnjenje.
#### Prevajanje po potrebi
Privzeto je omogočeno dev.lazyCompilation, le ko dostopate do določene strani, se ta stran prevaja, kar znatno poveča hitrost zagona med razvojem, celo omogoča zagon v milisekundah. Rspress prav tako izvaja strategijo prednalaganja usmerjanja, ko se miška zadrži nad povezavo, se ciljna usmerjevalna stran predhodno naloži, v kombinaciji z lazyCompilation pa omogoča brezhibno izkušnjo razvoja.
#### Trajno predpomnjenje
2.0 prav tako privzeto omogoča trajno predpomnjenje, ki ponovno uporabi rezultate prejšnjega prevajanja v vročem zagonu, kar poveča hitrost gradnje za 30%-60%. To pomeni, da se bo hitrost zagona po prvem zagonu rspress dev ali rspress build znatno povečala.
### Izkušnja pri razvoju dokumentacije
#### Privzeto omogočeno preverjanje mrtvih povezav
Rspress 2.0 privzeto omogoča funkcijo preverjanja mrtvih povezav. Med postopkom gradnje samodejno preverja neveljavne povezave v dokumentu, kar vam pomaga pravočasno odkriti in popraviti.
#### Datotečni blok kode
Lahko uporabite lastnost file="./path/to/file" za sklicevanje na zunanje datoteke kot vsebino bloka kode, kar omogoča vzdrževanje primerne kode v ločenih datotekah.
#### bolj fleksibilna uporaba meta za preview
@rspress/plugin-preview zdaj uporablja lastnost meta, kar je bolj fleksibilno in se lahko uporablja skupaj z datotečnimi bloki kode.
### Rslib & Rspress
Ko uporabljate create-rslib za ustvarjanje projekta, zdaj lahko izberete orodje Rspress. To vam omogoča, da med razvojem knjižnice komponent hitro postavite ustrezno dokumentacijsko stran za pisanje navodil za uporabo komponent, prikazovanje referenc API ali takojšnje predogledovanje učinkov komponent.
### Več uradnih vtičnikov Rspress
Rspress 2.0 je dodal več uradnih vtičnikov:
- @rspress/plugin-algolia: podpira zamenjavo vgrajenega iskanja Rspress z Algolia DocSearch
- @rspress/plugin-twoslash: doda namige o tipih za bloke kode TypeScript
- @rspress/plugin-llms: zagotavlja zmožnost generiranja llms.txt za projekte, ki ne podpirajo SSG in SSG-MD
- @rspress/plugin-sitemap: samodejno generira datoteko Sitemap za optimizacijo SEO
## Prelomne spremembe
### Migracija iz Rspress 1.x
Če ste uporabnik projekta 1.x, smo pripravili podrobno migracijsko dokumentacijo, ki vam pomaga nadgraditi iz 1.x na 2.0. Uporabite lahko funkcijo "Kopiraj Markdown" na strani, da jo vnesete v svoj običajni kodirni agent (kot je Claude Code itd.) za dokončanje migracije.### Node.js in zahteve različic odvisnosti
Rspress 2.0 zahteva Node.js različico 20+, React različico 18+.
Naslednji korak
Objava Rspress 2.0 je le nov začetek. Po tej objavi bo Rspress nadaljeval z iteracijami:
- Napredovanje ekosistemskih integracij: globlja povezava z Rslib, Rstest, da se zagotovi integrirano razvojno izkušnjo za projekte sprednjega dela in knjižnice komponent.
- Raziskovanje globlje integracije AI in dokumentacije: kot so pametno vprašanje in odgovor, samodejno povzemanje itd.; izboljšanje SSG-MD, da postane stabilnejši in bolj enostaven za uporabo.
npm create rspress@latest
