Rspress 2.0 шығарылымы: тәжірибе мен AI-ға бағытталған жаңа жаңарту

Біз Rspress 2.0-дің ресми шығарылғанын қуана хабарлаймыз!

Rspress - Rsbuild негізіндегі статикалық сайт генераторы, әзірлеушілер үшін арнайы жасалған құжаттар сайты құралы. 2023 жылы ресми шығарылғаннан бері, Rspress 1.x жалпы 144 нұсқаны шығарды, жобаны дамытуға 125 қатысушы қатысты. Көптеген әзірлеушілер Rspress-ті таңдайды, оның тиімді компиляция өнімділігі, келісімшарт маршрутизациясы және компоненттер кітапханасының алдын ала қарау сияқты мүмкіндіктері арқасында әдемі және сенімді құжаттар сайттарын құруда.

Қоғамдастықтың пікірлері мен ұсыныстарына негізделген, Rspress 2.0 тақырыптың әдемілігі, AI-native, құжаттарды дамыту тәжірибесі, Rslib-пен бірге пайдалану сияқты аспектілерде одан әрі дамыды.

Неге Rspress 2.0

Rspress 1.x құжаттар сайтының фреймворкінің компиляция өнімділігі мәселелерін шешті, бірақ әлі де құжаттарды дамыту құралы ретінде негізгі тәжірибеге әсер ететін кейбір мәселелер бар. 2.0 нұсқасы тек компиляция өнімділігіне ғана емес, сонымен қатар құжаттар сайтының тәжірибесінің басқа аспектілеріне де назар аударады:

• Тақырып стилі: көркем default тақырып, және әртүрлі теңшеу тақырыптарын ұсыну, 1.x-те тақырыпты теңшеуде тұрақты API-нің жетіспеушілігін шешеді.
• AI-native: құжаттар тек адам оқырмандары үшін ғана емес, сонымен қатар агенттер тарапынан жақсы түсінілуі және пайдаланылуы керек. Rspress қазір llms.txt генерациясы мен SSG-дан туындайтын SSG-MD функциясын енгізді, агенттер оқуы үшін жоғары сапалы Markdown рендерленген мазмұнды генерациялайды.
• Сұраныс бойынша компиляция, бірден іске қосу: әдепкі бойынша lazyCompilation-ды қосу, ресурстарды алдын ала жүктеу функциясымен бірге, тек белгілі маршрутына кіргенде қажетті файлдарды құрастыру, жобаның көлемі қаншалықты үлкен болса да, dev бірден іске қосылады.
• Shiki кодты бөлектеу: әдепкі бойынша Shiki-ді интеграциялау, құрылыс кезінде синтаксисті бөлектеу аяқталады, тақырыпты ауыстыруды, transformer кеңейтулерін қолдайды, мысалы, @rspress/plugin-twoslash, код блоктарының көрсету әсерін байытады.
• Құжаттарды дамыту тәжірибесі: nav.json, meta.json сияқты файлдардың HMR-ін оңтайландыру және IDE ішінде кодты көрсету үшін json схемасын қосу; әдепкі бойынша өлі сілтемелерді тексеру функциясын қосу; сыртқы файлдарды сілтеме жасау үшін жаңа файл код блоктарының синтаксисін қосу; @rspress/plugin-preview және @rspress/plugin-playground-ды бір уақытта пайдалану қолдау.
• Rslib интеграциясы: қазір create-rslib арқылы компоненттер кітапханасы жобасын жасағанда, Rspress-ті құжаттар құралы ретінде таңдап, компонент құжаттар сайттарын тез құруға болады.

2.0 жаңа мүмкіндіктер

Жаңа тақырып

2.0 әдепкі тақырыбы жүйелі жаңартуды алды, оны команда дизайнері @Zovn Wei жалпы жобалаған, визуалды әсер мен оқу тәжірибесінде елеулі жақсартулар бар, және әр компонентті жеке ауыстыруға болады, жоғары теңшеу мүмкіндігіне ие.

Тақырыпты теңшеу

Теңшеу деңгейіне қарай төменнен жоғарыға дейін, CSS айнымалылары, BEM класс аттары, ESM қайта экспорттау, компоненттерді eject ету сияқты төрт теңшеу тақырыбының тәсілі бар.- CSS айнымалылары: Жаңа тақырып көп CSS айнымалыларын ашты, тақырып түсін, код блоктарын, басты беттің стилін қамтиды. Сіз CSS айнымалылар бетінде интерактивті түрде барлық CSS айнымалыларын алдын ала қарап, реттей аласыз, көңіліңізден шыққан конфигурацияны жобада қолдану үшін тікелей көшіре аласыз.

• BEM класс атаулары: Енді кірістірілген компоненттер BEM атау стандартын қолданады. Бұл өте ескі мектептің таңдауы, бірақ бұл біздің терең ойластырылған шешіміміз. Пайдаланушылар CSS селекторлары арқылы стильдерді дәл реттей алады, HTML құрылымы айқынырақ.
• ESM қайта экспорттау: Егер CSS-тегі өзгерістер тапсырыс талаптарын қанағаттандырмаса, JS арқылы тереңдетілген теңшеу жүргізуге болады. theme/index.tsx ішінде ESM қайта экспорттау арқылы Rspress-тің кез келген кірістірілген компонентін қаптау мүмкіндігі бар.
• Компонентті шығару: Сіз жаңа rspress eject [component] командасын пайдалана аласыз, бұл команда көрсетілген компоненттің бастапқы кодын theme/components/ каталогына көшіреді, сіз бұл кодтарды еркін өзгерте аласыз, тіпті AI-ға тікелей өзгерту үшін бере аласыз, терең теңшеуді жүзеге асыру үшін.

Навигациялық панель, бүйірлік панель тег

Rspress 2.0 Tag компонентін іске асырды, енді frontmatter ішіндегі tag атрибутын пайдаланып, бүйірлік панельде немесе навигациялық панельде UI белгілерін жасауға болады.

Кірістірілген көптілді қолдау

1.x нұсқасында Rspress тек ағылшын мәтінін кірістірді, егер басқа тілдерді, мысалы, zh, қолдансаңыз, барлық мәтіндерді конфигурациялау қажет, бұл пайдалануда қиындық туғызады. Енді 2.0 тақырыбы zh, en, ja, ko, ru және басқа да көптеген тілдердің аударма мәтіндерін кірістірді, жүйе тіл конфигурациясына сәйкес автоматты түрде "Tree Shaking" жүргізеді, тек сіз қолданатын мәтіндер мен тілдерді жинақтайды.

llms.txt қолдауы

Rspress енді llms.txt генерациялау мүмкіндігін core-ға біріктірді және жаңа SSG-MD (Static Site Generation to Markdown, статикалық сайт Markdown генерациясы) мүмкіндігін іске асырды.

React динамикалық рендерингке негізделген фронтенд фреймворктарында статикалық ақпаратты алу қиындықтары жиі кездеседі, Rspress те осындай қиындықтарға тап болды. Rspress пайдаланушыларға MDX фрагменттері, React компоненттері, Hooks және TSX маршрутизациясы сияқты динамикалық мүмкіндіктер арқылы құжаттың көрнекілігін арттыруға мүмкіндік береді. Бірақ бұл динамикалық мазмұн Markdown мәтініне айналдырылғанда келесі мәселелерге тап болады:

• MDX-ті AI-ға тікелей беру көп код синтаксисінің шуды қамтиды және React компонентінің мазмұнын жоғалтады
• HTML-ды Markdown-ға айналдыру көбінесе нашар нәтиже береді, ақпараттың сапасын қамтамасыз ету қиын

Бұл мәселені шешу үшін Rspress 2.0 SSG-MD мүмкіндігін енгізді. Бұл статикалық сайт генерациясына (SSG) ұқсас жаңа функция, бірақ айырмашылығы - ол сіздің бетіңізді HTML файлының орнына Markdown файлы ретінде рендерлейді және llms.txt және llms-full.txt қатысты файлдарды генерациялайды.

Shiki компиляциясы кезінде код блоктарын бөлектеуRspress 2.0 әдепкі бойынша кодты жарықтандыру үшін Shiki пайдаланады. 1.x нұсқасындағы prism жұмыс уақыты жарықтандыру схемасымен салыстырғанда, Shiki компиляция кезінде жарықтандыруды аяқтайды.

• Түрлі тақырып стильдерін қолдайды, мысалы, CSS айнымалылар бетінде интерактивті түрде әртүрлі Shiki тақырыптарын ауыстыру және алдын ала қарау.
• Сонымен қатар, Shiki жазуды байыту үшін өзіңіздің трансформаторыңызды пайдалануға мүмкіндік береді, мысалы twoslash және т.б.
• Бағдарламалау тілдерін қажеттілікке қарай енгізу, жұмыс уақыты шығындары мен пакет көлемін арттырмайды.
• TextMate синтаксисіне негізделген VS Code-қа сәйкес дәл синтаксистік жарықтандыруды жүзеге асырады.

Құрылыс өнімділігін арттыру

Rspress 2.0 негізінен Rsbuild және Rspack 2.0 алдын ала қарау нұсқасымен басқарылып, әдепкі бойынша қажеттілікке қарай компиляциялау және тұрақты кэштеуді қосады.

Қажеттілікке қарай компиляциялау

Әдепкі бойынша dev.lazyCompilation қосылған, тек сіз белгілі бір бетке кіргенде, сол бет компиляцияланады, бұл әзірлеу басталу жылдамдығын едәуір арттырады, тіпті миллисекунд деңгейінде суық бастауға мүмкіндік береді. Rspress сонымен қатар маршрутизацияның алдын ала жүктеу стратегиясын жүзеге асырады, сілтеменің үстінде тінтуірді ұстап тұрғанда мақсатты маршрут бетін алдын ала жүктейді, lazyCompilation-мен бірге зақымсыз әзірлеу тәжірибесін қамтамасыз етеді.

Тұрақты кэштеу

2.0 сонымен қатар тұрақты кэштеуді әдепкі бойынша қосады, ыстық бастау кезінде өткен компиляция нәтижелерін қайта пайдаланады, құрылыс жылдамдығын 30%-60% арттырады. Бұл rspress dev немесе rspress build бірінші рет іске қосылғаннан кейін, кейінгі іске қосу жылдамдығы айтарлықтай артады дегенді білдіреді.

Құжат әзірлеу тәжірибесі

Әдепкі бойынша өлі сілтемелерді тексеру

Rspress 2.0 әдепкі бойынша өлі сілтемелерді тексеру функциясын қосады. Құрылыс процесінде құжаттағы жарамсыз сілтемелерді автоматты түрде тексереді, сізге уақытында анықтап, түзетуге көмектеседі.

Файл код блоктары

Сіз сыртқы файлдарды код блоктарының мазмұны ретінде сілтеме жасау үшін file="./path/to/file" атрибутын пайдалана аласыз, мысал кодын бөлек файлда ұстап тұра аласыз.

preview-дің икемді мета қолдануы

@rspress/plugin-preview қазір мета атрибутына негізделген, бұл оны икемді етеді, сонымен қатар файл код блоктарымен бірге пайдалануға болады.

Rslib & Rspress

create-rslib арқылы жобаны жасағанда, сіз қазір Rspress құралын таңдай аласыз. Бұл сізге компоненттер кітапханасын әзірлеу кезінде, компоненттердің пайдалану нұсқауларын жазу, API сілтемелерін көрсету немесе компоненттердің әсерін нақты уақыт режимінде алдын ала қарау үшін қолдау көрсететін құжат сайттарын жылдам құруға мүмкіндік береді.

Rspress ресми плагиндері

Rspress 2.0 бірнеше ресми плагиндерді қосты:

• @rspress/plugin-algolia: Rspress-тің кірістірілген іздеуін Algolia DocSearch-қа ауыстыруды қолдайды
• @rspress/plugin-twoslash: TypeScript код блоктарына типтік кеңестер қосады
• @rspress/plugin-llms: SSG және SSG-MD қолдамайтын жобалар үшін llms.txt генерациялау мүмкіндігін ұсынады
• @rspress/plugin-sitemap: SEO-ны оңтайландыру үшін Sitemap файлдарын автоматты түрде жасайды

Маңызды өзгерістер

Rspress 1.x-ке көшу

Егер сіз 1.x жобасының пайдаланушысы болсаңыз, біз сізге 1.x-ті 2.0-ге жаңартуға көмектесетін егжей-тегжейлі көшу құжатын дайындадық. Сіз беттегі "Markdown көшіріп алу" функциясын тікелей пайдаланып, оны сіздің жиі қолданылатын кодтау агентіңізге (мысалы, Claude Code және т.б.) енгізе аласыз.### Node.js 与上游依赖版本要求

Rspress 2.0 要求 Node.js 版本 20+，React 版本 18+。

## 下一步

Rspress 2.0 的发布只是一个新的起点。本次发布后，Rspress 将持续迭代：

- 推进生态集成：与 Rslib、Rstest 更深度地结合，提供前端项目和组件库项目的一体化开发体验。
- 探索 AI 与文档更深度集成：如智能问答、自动摘要等；完善 SSG-MD 使其稳定并更加易用。

立即使用或升级到 Rspress 2.0，体验全新的文档开发之旅！

npm create rspress@latest