Rspress 2.0 kiadás: új frissítés a felhasználói élmény és az AI terén
Rspress 2.0 kiadás: új frissítés a felhasználói élmény és az AI terén
Örömmel jelentjük be a Rspress 2.0 hivatalos kiadását!
Rspress egy Rsbuild alapú statikus weboldal-generátor, amelyet kifejezetten fejlesztők számára terveztek dokumentációs eszközként. 2023 óta, a Rspress 1.x összesen 144 verziót iterált, és 125 hozzájáruló vett részt a projekt fejlesztésében. Egyre több fejlesztő választja a Rspress-t, kihasználva annak hatékony fordítási teljesítményét, konvencionális útvonalait és komponens könyvtár előnézeti funkcióit, hogy szép és megbízható dokumentációs weboldalakat építsenek.
A közösségi visszajelzések és javaslatok alapján a Rspress 2.0 a téma esztétikájában, AI-native funkciókban, dokumentációs fejlesztési élményben, és Rslib használatával tovább fejlődött.
Miért Rspress 2.0
A Rspress 1.x már megoldotta a dokumentációs weboldal keretrendszer fordítási teljesítményének problémáit, de még mindig vannak olyan problémák, amelyek befolyásolják a dokumentációs fejlesztői eszközök alapvető élményét. A 2.0 verzió nemcsak a fordítási teljesítményre összpontosít, hanem a dokumentációs weboldal élményének egyéb aspektusaira is:
- Téma stílus: egy szebb alapértelmezett téma, amely számos testreszabási lehetőséget kínál, megoldva a 1.x verzióban a téma testreszabásának stabil API-jának hiányát.
- AI-native: a dokumentáció nemcsak az emberi olvasók számára szolgál, hanem az Agentek számára is jobban érthetővé és használhatóvá kell válnia. A Rspress most beépített llms.txt generálást és az SSG-ből származó SSG-MD funkciót, amely magas minőségű Markdown renderelt tartalmat generál az Agentek számára.
- Igény szerinti fordítás, azonnali indítás: alapértelmezés szerint engedélyezve van a lazyCompilation, a linkek hover idején a források preload funkciójával, csak a konkrét útvonalak látogatásakor építi fel a szükséges fájlokat, így bármilyen projektméret esetén a dev azonnal elindulhat.
- Shiki kódkiemelés: alapértelmezés szerint integrálva van a Shiki, a fordítás során végzi a szintaxis kiemelést, támogatja a téma váltást, a transformer kiterjesztéseket, mint például @rspress/plugin-twoslash, gazdagabb kódblokk megjelenítési hatásokat nyújtva.
- Dokumentációs fejlesztési élmény: optimalizálja az nav.json, meta.json és más fájlok HMR-jét, és új json sémát ad hozzá az IDE-n belüli kódjavaslatokhoz; alapértelmezés szerint engedélyezve van a holt linkek ellenőrzése; új fájl kódblokk szintaxis, amely támogatja a külső fájlok hivatkozását; @rspress/plugin-preview és @rspress/plugin-playground egyidejű használatát is támogatja.
- Rslib integráció: most már a create-rslib használatával létrehozott komponens könyvtár projektek esetén választható a Rspress dokumentációs eszközként, gyorsan felépítve a komponens dokumentációs weboldalakat.
2.0 új funkciók
Teljesen új téma
A 2.0 alapértelmezett témája egy átfogó frissítést kapott, amelyet a csapat tervezője @Zovn Wei tervezett, jelentős javulást mutatva a vizuális hatásban és az olvasási élményben, és minden komponens függetlenül cserélhető, így nagyon testreszabható.
Téma testreszabás
A testreszabás mértéke szerint alacsonyabbtól a magasabbig négyféle testreszabási mód létezik: CSS változók, BEM osztálynevek, ESM újraexportálás, komponens eject.- CSS változók: Az új téma több CSS változót tett elérhetővé, amelyek a téma színét, kódblokkokat, kezdőlapot és egyéb stílusokat fednek le. Az összes CSS változót interaktívan előnézheted és módosíthatod a CSS változók oldalon, majd a kívánt beállításokat közvetlenül másolhatod a projektedbe.
- BEM osztálynevek: A beépített komponensek mostantól BEM elnevezési szabványt alkalmaznak. Ez egy nagyon régi iskola választás, de egy alaposan megfontolt döntés is. A felhasználók a CSS szelektorok segítségével pontosan módosíthatják a stílusokat, az HTML struktúra pedig világosabbá válik.
- ESM újraexportálás: Ha a CSS módosítások nem elégítik ki a testreszabási igényeket, a JS segítségével mélyebb testreszabásra van lehetőség. A theme/index.tsx fájlban az ESM újraexportálás révén bármely Rspress beépített komponenst felülírhatsz.
- Komponens eltávolítása: Használhatod az új rspress eject [component] parancsot, amely a megadott komponens forráskódját a theme/components/ könyvtárba másolja, így szabadon módosíthatod ezeket a kódokat, sőt, akár AI-ra is bízhatod a módosítást a mélyebb testreszabás érdekében.
Navigációs sáv, oldalsáv tag
Az Rspress 2.0 megvalósította a Tag komponenst, mostantól a frontmatter tag attribútumát használva UI jelöléseket végezhetsz az oldalsávban vagy a navigációs sávban.
Beépített többnyelvű támogatás
Az 1.x verzióban az Rspress csak angol szöveget tartalmazott, ha más nyelvet, például zh-t használtál, akkor minden szöveget külön kellett konfigurálni, ami meglehetősen bonyolult volt. Most a 2.0 téma beépített zh, en, ja, ko, ru és más nyelvek fordítási szövegeivel rendelkezik, a rendszer automatikusan végrehajtja a "Tree Shaking"-et a nyelvi konfiguráció alapján, csak azokat a szövegeket és nyelveket csomagolja, amelyeket használsz.
llms.txt támogatás
Az Rspress most integrálta az llms.txt generálási képességet a core-ba, és megvalósította az új SSG-MD (Statikus Webhely Generálás Markdown-ra, statikus webhely Markdown generálás) képességet.
A React alapú dinamikus renderelésű frontend keretrendszerekben gyakran előfordul, hogy a statikus információk nehezen kinyerhetők, az Rspress is hasonló kihívásokkal néz szembe. Az Rspress lehetővé teszi a felhasználók számára, hogy MDX fragmentumok, React komponensek, Hooks és TSX útvonalak segítségével fokozzák a dokumentum kifejezőerejét. De ezek a dinamikus tartalmak a Markdown szövegre való átkonvertáláskor a következő problémákkal szembesülnek:
- Az MDX közvetlen AI-nak való megadása sok kód szintaktikai zajt tartalmaz, és elveszíti a React komponens tartalmát.
- Az HTML Markdown-ra való átkonvertálása gyakran nem kielégítő, az információ minősége nehezen garantálható.
Ennek a problémának a megoldására az Rspress 2.0 bevezette az SSG-MD funkciót. Ez egy új funkció, amely hasonló a statikus webhely generáláshoz (SSG), de a különbség az, hogy a weboldalaidat Markdown fájlokká rendereli, nem HTML fájlokká, és generálja az llms.txt és llms-full.txt kapcsolódó fájlokat.
Shiki fordító kódblokkok kiemeléseRspress 2.0 alapértelmezés szerint a Shiki-t használja a kódkiemeléshez. A 1.x-es prism futási idejű kiemelési megoldásához képest a Shiki a fordítási időben végzi el a kiemelést.
- Támogat többféle téma stílust, például a CSS változók oldalán interaktívan váltogathatók és előnézhetők a különböző Shiki témák.
- A Shiki lehetővé teszi a testreszabott transformer-ek használatát is, hogy gazdagabb írási élményt nyújtson, például a twoslash-t.
- Igény szerint importálható programozási nyelv, anélkül, hogy növelné a futási időt és a csomag méretét.
- A TextMate szintaxisra építve pontos szintaxis kiemelést valósít meg, amely összhangban van a VS Code-dal.
Építési teljesítmény javítása
A Rspress 2.0 alapja az Rsbuild és az Rspack 2.0 előzetes verziója, és alapértelmezés szerint engedélyezve van az igény szerinti fordítás és a tartós gyorsítótárazás.
Igény szerinti fordítás
Alapértelmezés szerint engedélyezve van a dev.lazyCompilation, csak akkor fordítódik le egy oldal, amikor azt meglátogatod, jelentősen növelve a fejlesztési indítási sebességet, sőt, akár milliszekundumos hideg indítást is lehetővé téve. A Rspress emellett megvalósította az útvonal előtöltési stratégiáját, amikor az egér a link fölé kerül, előre betölti a célútvonal oldalát, a lazyCompilation-nal együtt pedig veszteségmentes fejlesztési élményt nyújt.
Tartós gyorsítótárazás
A 2.0 alapértelmezés szerint engedélyezte a tartós gyorsítótárazást, amely a legutóbbi fordítási eredményeket használja újra a forró indítás során, 30%-60%-kal növelve az építési sebességet. Ez azt jelenti, hogy az rspress dev vagy rspress build első futtatása után a későbbi indítási sebesség jelentősen javul.
Dokumentációs fejlesztési élmény
Alapértelmezett halott link ellenőrzés
A Rspress 2.0 alapértelmezés szerint engedélyezi a halott linkek ellenőrzését. Az építési folyamat során automatikusan ellenőrzi a dokumentumban található érvénytelen linkeket, segítve ezzel a gyors felfedezést és javítást.
Fájl kódblokkok
A file="./path/to/file" attribútum használatával külső fájlokat hivatkozhatsz kódblokk tartalomként, így a példa kódokat külön fájlban tarthatod karban.
preview rugalmasabb meta használat
@rspress/plugin-preview most a meta attribútum alapján működik, rugalmasabb, és a fájl kódblokkokkal is kombinálható.
Rslib & Rspress
A create-rslib használatával történő projekt létrehozásakor mostantól választhatod a Rspress eszközt. Ez lehetővé teszi, hogy a komponens könyvtár fejlesztése mellett gyorsan felépítsd a kapcsolódó dokumentációs webhelyet, amely a komponensek használati útmutatójának írására, az API referenciák bemutatására vagy a komponens hatásának valós idejű előnézetére szolgál.
További Rspress hivatalos pluginok
A Rspress 2.0 több hivatalos plugint is hozzáadott:
- @rspress/plugin-algolia: lehetővé teszi az Rspress beépített keresésének Algolia DocSearch-ra való cseréjét
- @rspress/plugin-twoslash: típusjelzéseket ad a TypeScript kódblokkokhoz
- @rspress/plugin-llms: llms.txt generálási képességet biztosít olyan projektek számára, amelyek nem támogatják az SSG-t és az SSG-MD-t
- @rspress/plugin-sitemap: automatikusan generál Sitemap fájlokat, a SEO optimalizálása érdekében
Megszakító változások
Migrálás Rspress 1.x-ből
Ha te az 1.x projekt felhasználója vagy, egy részletes migrációs dokumentumot készítettünk, hogy segítsünk az 1.x-ről 2.0-ra való frissítésben. Közvetlenül használhatod az oldalon található "Másolás Markdown" funkciót, hogy azt beírd a gyakran használt kódoló ügynöködbe (mint például Claude Code), hogy befejezd a migrációt.### Node.js és a felfelé irányuló függőségek verziókövetelményei
Rspress 2.0 követeli a Node.js 20+ verziót, a React 18+ verziót.
Következő lépések
A Rspress 2.0 kiadása csupán egy új kezdet. E kiadás után a Rspress folyamatosan iterálni fog:
- Ökoszisztéma integráció előmozdítása: mélyebb integráció a Rslib és Rstest rendszerekkel, egyesített fejlesztési élmény biztosítása a frontend projektek és komponens könyvtár projektek számára.
- AI és dokumentáció mélyebb integrációjának felfedezése: mint például intelligens kérdés-válasz, automatikus összefoglalás stb.; a SSG-MD tökéletesítése a stabilitás és a használhatóság érdekében.
npm create rspress@latest
