Rspress 2.0 Imetolewa: Sasisho Jipya kwa Uzoefu na AI
Rspress 2.0 Imetolewa: Sasisho Jipya kwa Uzoefu na AI
Tunafurahia kutangaza uzinduzi rasmi wa Rspress 2.0!
Rspress ni jenereta ya tovuti za statiki inayotegemea Rsbuild, iliyoundwa mahsusi kama zana ya tovuti za hati kwa wabunifu. Tangu ilipozinduliwa rasmi mwaka 2023, Rspress 1.x imepata mabadiliko 144 na 125 waandishi wa habari wamehusika katika maendeleo ya mradi. Wabunifu wengi zaidi wanachagua Rspress, wakitumia uwezo wake wa uundaji wa haraka, mwelekeo wa makubaliano na muonekano wa maktaba ya vipengele kujenga tovuti za hati zenye mvuto na kuaminika.
Kulingana na maoni na mapendekezo ya jamii, Rspress 2.0 imeenda mbali zaidi katika uzuri wa mandhari, AI-native, uzoefu wa maendeleo ya hati, na matumizi pamoja na Rslib.
Kwa Nini Rspress 2.0
Rspress 1.x tayari ilitatua matatizo ya utendaji wa uundaji wa mfumo wa tovuti za hati, lakini bado kuna matatizo yanayoathiri uzoefu wa msingi kama zana ya maendeleo ya hati. Toleo la 2.0 halitakuwa tu juu ya kutafuta utendaji wa uundaji, bali pia linazingatia nyanja nyingine za uzoefu wa tovuti za hati:
- Mitindo ya mandhari: seti ya mandhari ya default yenye mvuto zaidi, na inatoa njia mbalimbali za kubadilisha mandhari, ikitatua tatizo la 1.x la ukosefu wa API thabiti katika kubadilisha mandhari.
- AI-native: Hati sio tu huduma kwa wasomaji wa kibinadamu, lakini pia zinahitaji kueleweka na kutumiwa vizuri na Wakala. Rspress sasa ina kipengele cha kuunda llms.txt na SSG-MD kinachotokana na SSG, kinachozalisha maudhui ya Markdown ya ubora wa juu kwa ajili ya Wakala kusoma.
- Uundaji wa mahitaji, uzinduzi wa papo hapo: Inawasha lazyCompilation kwa default, ikishirikiana na kipengele cha preload cha rasilimali wakati wa hover ya kiungo, kinajenga faili zinazohitajika tu wakati wa kufikia mwelekeo maalum, kuhakikisha kwamba bila kujali ukubwa wa mradi, dev inaweza kuanzishwa papo hapo.
- Shiki kuangazia msimbo: Inajumuisha Shiki kwa default, inakamilisha kuangazia sintaksia wakati wa uundaji, inasaidia kubadilisha mandhari, na upanuzi wa transformer, kama vile @rspress/plugin-twoslash, inatoa matokeo ya kuonyesha vizuizi vya msimbo vya hali ya juu.
- Uzoefu wa maendeleo ya hati: Inaboresha HMR ya faili kama nav.json, meta.json na kuongeza json schema kwa ajili ya vidokezo vya msimbo ndani ya IDE; inawasha kipengele cha ukaguzi wa viungo vilivyokufa kwa default; inaongeza sintaksia ya vizuizi vya faili, inasaidia kurejelea faili za nje; @rspress/plugin-preview na @rspress/plugin-playground zinasaidia kutumika kwa wakati mmoja, n.k.
- Ujumuishaji wa Rslib: Sasa unaweza kuchagua Rspress kama zana ya hati unapounda mradi wa maktaba ya vipengele kwa kutumia create-rslib, kujenga haraka tovuti za hati za vipengele.
Vipengele Vipya vya 2.0
Mandhari Mpya
Mandhari ya default ya 2.0 imepata sasisho la mfumo mzima, iliyoundwa na mbunifu wa timu @Zovn Wei, ikiwa na maboresho makubwa katika athari za kuona na uzoefu wa kusoma, na kila kipengele kinaweza kubadilishwa kwa uhuru, ikitoa kiwango cha juu cha kubadilika.
Kubadilisha Mandhari
Kulingana na kiwango cha kubadilisha kutoka chini hadi juu, kuna njia nne za kubadilisha mandhari: mabadiliko ya CSS, majina ya darasa ya BEM, upanuzi wa ESM, na eject ya kipengele.- CSS Variables: Mandhari mpya inatoa zaidi ya CSS variables, ikifunika rangi za mandhari, blocks za msimbo, mtindo wa ukurasa wa nyumbani, n.k. Unaweza kuangalia na kubadilisha CSS variables zote kwa njia ya mwingiliano kwenye ukurasa wa CSS variables, na unapopata usanidi unaokufaa unaweza kuiga moja kwa moja kwenye mradi wako.
- BEM Class Names: Komponenti zilizojengwa sasa zinatumia viwango vya BEM. Hii ni chaguo la zamani sana, lakini pia ni uamuzi wetu wa kufikiria kwa makini. Watumiaji wanaweza kubadilisha mtindo kwa usahihi kupitia CSS selectors, na muundo wa HTML unakuwa wazi zaidi.
- ESM Re-export Override: Ikiwa mabadiliko kwenye CSS hayawezi kukidhi mahitaji ya kubinafsisha, unaweza kufanya ubinafsishaji wa kina kupitia JS. Katika theme/index.tsx kwa kutumia ESM re-export, unaweza kufunika komponenti yoyote iliyojengwa ya Rspress.
- Component Eject: Unaweza kutumia amri mpya kabisa ya rspress eject [component], amri hii itachukua msimbo wa chanzo wa komponenti iliyotajwa na kuiga kwenye directory ya theme/components/, unaweza kubadilisha msimbo huu kwa uhuru, hata kumkabidhi AI kubadilisha, ili kufikia ubinafsishaji wa kina.
Navigation Bar, Sidebar Tag
Rspress 2.0 imefanikisha Tag component, sasa unaweza kutumia tag attribute katika frontmatter, kufanya alama za UI kwenye sidebar au navigation bar.
Built-in Multilingual Support
Katika toleo la 1.x, Rspress ilikuwa na maandiko ya Kiingereza pekee, ikiwa unatumia lugha nyingine kama zh, ilibidi uweke mipangilio kwa maandiko yote, ambayo ilikuwa ngumu kidogo. Sasa mandhari ya 2.0 ina maandiko ya tafsiri ya lugha nyingi kama zh, en, ja, ko, ru, n.k., mfumo utafanya "Tree Shaking" kiotomatiki kulingana na mipangilio ya lugha, na kupakia tu maandiko na lugha unazotumia.
llms.txt Support
Rspress sasa imejumuisha uwezo wa kuunda llms.txt ndani ya core, na imefanikisha uwezo mpya wa SSG-MD (Static Site Generation to Markdown, Uundaji wa Tovuti ya Kawaida hadi Markdown).
Katika mifumo ya mbele inayotegemea React, mara nyingi kuna changamoto ya kupata taarifa za kudumu, Rspress pia inakabiliwa na changamoto hiyo. Rspress inaruhusu watumiaji kuboresha uwasilishaji wa hati kupitia vipande vya MDX, komponenti za React, Hooks na sifa za TSX routing. Lakini maudhui haya ya kidinamik yanakabiliwa na matatizo yafuatayo wakati yanabadilishwa kuwa maandiko ya Markdown:
- Kutoa MDX moja kwa moja kwa AI kutakuwa na kelele nyingi za sintaksia ya msimbo, na kupoteza maudhui ya komponenti za React
- Kubadilisha HTML kuwa Markdown mara nyingi haina matokeo mazuri, ubora wa taarifa hauwezi kuhakikishwa
Ili kutatua tatizo hili, Rspress 2.0 imeanzisha kipengele cha SSG-MD. Hii ni kipengele kipya kabisa, kinachofanana na uundaji wa tovuti ya kawaida (SSG), lakini tofauti yake ni kwamba inafanya kurasa zako kuwa faili za Markdown, badala ya faili za HTML, na kuunda faili zinazohusiana za llms.txt na llms-full.txt.
Shiki Compilation Code Block HighlightRspress 2.0 inatumia Shiki kwa ajili ya kuangazia msimbo kwa chaguo-msingi. Ikilinganishwa na mpango wa kuangazia wa prism wa 1.x, Shiki inakamilisha mchakato wa kuangazia wakati wa uundaji.
- Inasaidia mitindo mbalimbali ya mandhari, kwa mfano, kwenye ukurasa wa mabadiliko ya CSS, unaweza kubadilisha na kuangalia mandhari tofauti za Shiki kwa njia ya mwingiliano.
- Kwa wakati huo huo, Shiki pia inaruhusu matumizi ya transformer za kawaida ili kuongeza uandishi, kama twoslash n.k.
- Inaleta lugha za programu kwa mahitaji, bila kuongeza mzigo wa wakati wa kukimbia na ukubwa wa pakiti.
- Imejengwa kwa msingi wa sarufi ya TextMate ili kutoa kuangazia sahihi ya sarufi inayofanana na VS Code.
Kuongeza Utendaji wa Ujenzi
Rspress 2.0 inasukumwa na toleo la awali la Rsbuild na Rspack 2.0, wakati huo huo inaruhusu uundaji wa mahitaji na uhifadhi wa kudumu.
Uundaji wa Mahitaji
Kwa chaguo-msingi, dev.lazyCompilation imewezeshwa, na ni wakati tu unapotembelea ukurasa fulani, ukurasa huo utaandaliwa, ikiongeza kasi ya uzinduzi wa maendeleo, hata kufikia uzinduzi wa baridi wa millisecond. Rspress pia inatekeleza mkakati wa preload wa njia, wakati panya inapoelekezwa juu ya kiungo, itachaji ukurasa wa njia lengwa mapema, ikishirikiana na lazyCompilation kutoa uzoefu wa maendeleo usio na hasara.
Uhifadhi wa Kudumu
2.0 pia imewezeshwa kwa chaguo-msingi uhifadhi wa kudumu, ikitumia matokeo ya awali ya uundaji katika uzinduzi wa moto, ikiongeza kasi ya ujenzi kwa 30%-60%. Hii inamaanisha kwamba baada ya kukimbia rspress dev au rspress build mara ya kwanza, kasi ya uzinduzi itakuwa wazi zaidi katika uzinduzi unaofuata.
Uzoefu wa Maendeleo ya Hati
Uwezo wa Kuangalia Viungo Visivyo na Maana
Rspress 2.0 imewezeshwa kwa chaguo-msingi uwezo wa kuangalia viungo visivyo na maana. Wakati wa mchakato wa ujenzi, itagundua kiotomatiki viungo visivyo na maana katika hati, ikikusaidia kugundua na kurekebisha kwa wakati.
Block za Msimbo wa Faili
Unaweza kutumia sifa ya file="./path/to/file" kuashiria faili za nje kama maudhui ya block ya msimbo, kuweka msimbo wa mfano katika faili tofauti ili kudumisha.
matumizi ya meta ya preview yenye kubadilika zaidi
@rspress/plugin-preview sasa inatumia sifa ya meta, ikifanya iwe rahisi zaidi, na inaweza pia kuunganishwa na block za msimbo wa faili.
Rslib & Rspress
Unapokuwa unatumia create-rslib kuunda mradi, sasa unaweza kuchagua zana ya Rspress. Hii inakuruhusu kujenga tovuti ya hati kwa haraka wakati wa kuendeleza maktaba ya vipengele, kwa ajili ya kuandika maelezo ya matumizi ya vipengele, kuonyesha rejeleo la API, au kuangalia kwa wakati halisi athari za vipengele.
Viongezeo vya Rspress vya Rasmi
Rspress 2.0 imeongeza viongezeo vingi vya rasmi:
- @rspress/plugin-algolia: inasaidia kubadilisha utafutaji wa ndani wa Rspress kuwa Algolia DocSearch
- @rspress/plugin-twoslash: inaongeza vidokezo vya aina kwa block za msimbo wa TypeScript
- @rspress/plugin-llms: inatoa uwezo wa kuunda llms.txt kwa miradi isiyo na msaada wa SSG na SSG-MD
- @rspress/plugin-sitemap: inaunda faili ya Sitemap kiotomatiki, kwa ajili ya kuboresha SEO
Mabadiliko Makubwa
Kuhamia Kutoka Rspress 1.x
Ikiwa wewe ni mtumiaji wa mradi wa 1.x, tumetayarisha hati ya maelekezo ya kina, kukusaidia kuhamia kutoka 1.x hadi 2.0. Unaweza kutumia moja kwa moja kipengele cha "Nakili Markdown" kilichomo kwenye ukurasa, na kuingiza kwa wakala wako wa uandishi wa kawaida (kama Claude Code n.k.) ili kukamilisha uhamaji.### Node.js na Mahitaji ya Toleo la Msingi
Rspress 2.0 inahitaji toleo la Node.js 20+, toleo la React 18+.
Hatua Inayofuata
Kuzinduliwa kwa Rspress 2.0 ni mwanzo mpya tu. Baada ya uzinduzi huu, Rspress itaendelea kuboresha:
- Kuendeleza Uunganisho wa Ekolojia: Kuunganishwa kwa kina na Rslib, Rstest, kutoa uzoefu wa maendeleo wa pamoja kwa miradi ya mbele na miradi ya maktaba ya vipengele.
- Kuchunguza Uunganisho wa AI na Hati kwa Kina: Kama vile maswali ya akili, muhtasari wa kiotomatiki, n.k.; kuboresha SSG-MD ili iwe thabiti na rahisi zaidi kutumika.
npm create rspress@latest
