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 δεν περιορίζεται μόνο στην επιδίωξη επιδόσεων μεταγλώττισης, αλλά εστιάζει και σε άλλες πτυχές της εμπειρίας ιστοσελίδας τεκμηρίωσης:

• Στυλ θεμάτων: Ένα πιο όμορφο προεπιλεγμένο θέμα, με πολλές επιλογές προσαρμογής θεμάτων, επιλύει το πρόβλημα της 1.x που έλειπε σταθερό API για την προσαρμογή θεμάτων.
• AI-native: Η τεκμηρίωση δεν εξυπηρετεί μόνο τους ανθρώπινους αναγνώστες, αλλά πρέπει επίσης να κατανοείται και να χρησιμοποιείται καλύτερα από τους Agents. Το Rspress τώρα ενσωματώνει τη λειτουργία δημιουργίας llms.txt και SSG-MD που προέρχεται από το SSG, παράγοντας περιεχόμενο Markdown υψηλής ποιότητας για ανάγνωση από τους Agents.
• Μεταγλώττιση κατ' απαίτηση, άμεση εκκίνηση: Ενεργοποιεί προεπιλεγμένα την lazyCompilation, σε συνδυασμό με τη λειτουργία preload πόρων κατά την πλοήγηση, κατασκευάζει τα απαιτούμενα αρχεία μόνο όταν επισκέπτεστε συγκεκριμένες διαδρομές, επιτυγχάνοντας άμεση εκκίνηση ανεξαρτήτως του μεγέθους του έργου.
• Shiki syntax highlighting: Ενσωματώνει προεπιλεγμένα το Shiki, ολοκληρώνοντας τη σύνταξη κατά τη διάρκεια της κατασκευής, υποστηρίζοντας εναλλαγή θεμάτων και επεκτάσεις transformer, όπως το @rspress/plugin-twoslash, προσφέροντας πιο πλούσια αποτελέσματα εμφάνισης μπλοκ κώδικα.
• Εμπειρία ανάπτυξης τεκμηρίωσης: Βελτιώνει το HMR των αρχείων nav.json, meta.json κ.λπ. και προσθέτει νέο json schema για υποδείξεις κώδικα εντός IDE; Ενεργοποιεί προεπιλεγμένα τη λειτουργία ελέγχου σπασμένων συνδέσμων; Προσθέτει σύνταξη μπλοκ κώδικα αρχείων, υποστηρίζοντας αναφορές σε εξωτερικά αρχεία; Υποστηρίζει ταυτόχρονη χρήση @rspress/plugin-preview και @rspress/plugin-playground κ.λπ.
• Ενσωμάτωση Rslib: Τώρα μπορείτε να επιλέξετε το Rspress ως εργαλείο τεκμηρίωσης όταν χρησιμοποιείτε το create-rslib για να δημιουργήσετε έργα βιβλιοθήκης συστατικών, γρήγορα δημιουργώντας ιστοσελίδες τεκμηρίωσης συστατικών.

Νέα χαρακτηριστικά 2.0

Νέο θέμα

Το προεπιλεγμένο θέμα 2.0 έχει υποστεί μια συστηματική αναβάθμιση, σχεδιασμένο από τον σχεδιαστή της ομάδας @Zovn Wei, με σημαντική βελτίωση στην οπτική εμφάνιση και την εμπειρία ανάγνωσης, και κάθε συστατικό μπορεί να αντικατασταθεί ανεξάρτητα, προσφέροντας υψηλή προσαρμοστικότητα.

Προσαρμογή θεμάτων

Ανάλογα με το επίπεδο προσαρμογής από χαμηλό σε υψηλό, υπάρχουν τέσσερις τρόποι προσαρμογής θεμάτων: CSS μεταβλητές, BEM κλάσεις, ESM επαναφορά κάλυψης, και αποσύνθεση συστατικών.- CSS μεταβλητές: Το νέο θέμα αποκαλύπτει περισσότερες CSS μεταβλητές, καλύπτοντας στυλ όπως το χρώμα του θέματος, τα μπλοκ κώδικα, την αρχική σελίδα κ.λπ. Μπορείτε να προβάλετε και να προσαρμόσετε διαδραστικά όλες τις CSS μεταβλητές στη σελίδα CSS μεταβλητών και αφού βρείτε την ικανοποιητική ρύθμιση, να την αντιγράψετε απευθείας στο έργο σας.

• BEM ονόματα κλάσεων: Τα ενσωματωμένα συστατικά τώρα χρησιμοποιούν τη BEM ονοματολογία. Αυτή είναι μια πολύ παλιά επιλογή, αλλά είναι και μια απόφαση που έχουμε σκεφτεί προσεκτικά. Οι χρήστες μπορούν να προσαρμόσουν ακριβώς τα στυλ μέσω CSS επιλεγμένων, καθιστώντας τη δομή HTML πιο σαφή.
• ESM επαναφορά κάλυψης: Εάν οι αλλαγές στο CSS δεν πληρούν τις απαιτήσεις προσαρμογής, μπορείτε να κάνετε πιο βαθιά προσαρμογή μέσω JS. Στο theme/index.tsx, χρησιμοποιώντας ESM επαναφορά, μπορείτε να καλύψετε οποιοδήποτε ενσωματωμένο συστατικό του Rspress.
• Eject συστατικού: Μπορείτε να χρησιμοποιήσετε την ολοκαίνουργια εντολή rspress eject [component], η οποία θα αντιγράψει τον πηγαίο κώδικα του καθορισμένου συστατικού στο φάκελο theme/components/, επιτρέποντάς σας να τροποποιήσετε αυτόν τον κώδικα ελεύθερα, ακόμη και να τον παραδώσετε απευθείας σε AI για να επιτύχετε βαθιά προσαρμογή.

Ετικέτα πλοήγησης, πλευρικής μπάρας

Το Rspress 2.0 υλοποίησε το συστατικό Tag, και τώρα μπορείτε να χρησιμοποιήσετε την ιδιότητα tag στο frontmatter για UI σημειώσεις στην πλευρική μπάρα ή στην πλοήγηση.

Ενσωματωμένη υποστήριξη πολλών γλωσσών

Στην έκδοση 1.x, το Rspress είχε μόνο ενσωματωμένο αγγλικό κείμενο, και αν χρησιμοποιούσατε άλλες γλώσσες όπως zh, έπρεπε να ρυθμίσετε όλα τα κείμενα, κάτι που ήταν αρκετά περίπλοκο. Τώρα, το θέμα 2.0 ενσωματώνει μεταφρασμένα κείμενα σε πολλές γλώσσες όπως zh, en, ja, ko, ru κ.λπ., και το σύστημα θα εκτελεί αυτόματα "Tree Shaking" με βάση τη ρύθμιση γλώσσας, συσκευάζοντας μόνο τα κείμενα και τις γλώσσες που χρησιμοποιείτε.

Υποστήριξη llms.txt

Το Rspress τώρα ενσωματώνει τη δυνατότητα δημιουργίας llms.txt στον πυρήνα του και έχει υλοποιήσει τη νέα δυνατότητα SSG-MD (Static Site Generation to Markdown, Στατική Γεννήτρια Ιστοσελίδων σε Markdown).

Στα πλαίσια των frontend πλαισίων που βασίζονται σε React, συχνά υπάρχει το πρόβλημα της δύσκολης εξαγωγής στατικών πληροφοριών, και το Rspress αντιμετωπίζει την ίδια πρόκληση. Το Rspress επιτρέπει στους χρήστες να ενισχύσουν την εκφραστικότητα των εγγράφων μέσω MDX τμημάτων, React συστατικών, Hooks και TSX διαδρομών κ.λπ. Ωστόσο, αυτά τα δυναμικά περιεχόμενα αντιμετωπίζουν τα εξής προβλήματα κατά τη μετατροπή τους σε Markdown κείμενο:

• Η άμεση εισαγωγή MDX σε AI θα περιλαμβάνει πολύ θόρυβο κώδικα και θα χάσει το περιεχόμενο των React συστατικών.
• Η μετατροπή HTML σε Markdown συχνά δεν έχει καλή απόδοση, με την ποιότητα των πληροφοριών να είναι δύσκολη να διασφαλιστεί.

Για να επιλυθεί αυτό το πρόβλημα, το Rspress 2.0 εισάγει τη δυνατότητα SSG-MD. Αυτή είναι μια ολοκαίνουργια λειτουργία, παρόμοια με τη στατική γεννήτρια ιστοσελίδων (SSG), αλλά η διαφορά είναι ότι θα αποδώσει τις σελίδες σας ως αρχεία Markdown, αντί για HTML αρχεία, και θα δημιουργήσει τα σχετικά αρχεία llms.txt και llms-full.txt.

Shiki σύνταξη κώδικα με χρωματισμόRspress 2.0 χρησιμοποιεί προεπιλεγμένα το Shiki για την επισήμανση κώδικα. Σε σύγκριση με την προσέγγιση επισήμανσης χρόνου εκτέλεσης prism 1.x, το Shiki ολοκληρώνει την επεξεργασία επισήμανσης κατά τη διάρκεια της μεταγλώττισης.

• Υποστηρίζει διάφορα θέματα στυλ, όπως μπορείτε να αλλάξετε και να προεπισκοπήσετε διαδραστικά διαφορετικά θέματα Shiki στη σελίδα μεταβλητών CSS.
• Ταυτόχρονα, το 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" για να αναφέρετε εξωτερικά αρχεία ως περιεχόμενο κωδικών μπλοκ, διατηρώντας τον κωδικό παραδείγματος σε ξεχωριστό αρχείο.

Πιο ευέλικτη χρήση του meta στο preview

Το @rspress/plugin-preview τώρα χρησιμοποιεί την ιδιότητα meta, είναι πιο ευέλικτο και μπορεί επίσης να συνδυαστεί με κωδικούς αρχείων.

Rslib & Rspress

Κατά τη χρήση του create-rslib για τη δημιουργία έργου, μπορείτε τώρα να επιλέξετε το εργαλείο Rspress. Αυτό σας επιτρέπει να αναπτύξετε γρήγορα έναν συνοδευτικό ιστότοπο τεκμηρίωσης ενώ αναπτύσσετε μια βιβλιοθήκη συστατικών, για να γράψετε οδηγίες χρήσης συστατικών, να εμφανίσετε αναφορές API ή να προεπισκοπήσετε σε πραγματικό χρόνο τα αποτελέσματα των συστατικών.

Περισσότερα επίσημα πρόσθετα Rspress

Η Rspress 2.0 προσθέτει πολλά επίσημα πρόσθετα:

• @rspress/plugin-algolia: Υποστηρίζει την αντικατάσταση της ενσωματωμένης αναζήτησης της Rspress με το Algolia DocSearch
• @rspress/plugin-twoslash: Προσθέτει υποδείξεις τύπων σε μπλοκ κώδικα TypeScript
• @rspress/plugin-llms: Παρέχει δυνατότητα δημιουργίας llms.txt για έργα που δεν υποστηρίζουν SSG και SSG-MD
• @rspress/plugin-sitemap: Δημιουργεί αυτόματα αρχεία Sitemap για τη βελτιστοποίηση SEO

Σημαντικές αλλαγές

Μετάβαση από 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, προσφέροντας μια ολοκληρωμένη εμπειρία ανάπτυξης για έργα frontend και βιβλιοθήκες συστατικών.
• Εξερεύνηση βαθύτερης ολοκλήρωσης AI με έγγραφα: Όπως έξυπνες ερωτήσεις και απαντήσεις, αυτόματες περιλήψεις κ.λπ.; Βελτίωση του SSG-MD για να γίνει πιο σταθερό και πιο εύχρηστο.

Χρησιμοποιήστε ή αναβαθμίστε τώρα στην Rspress 2.0 και ζήστε μια ολοκαίνουργια εμπειρία ανάπτυξης εγγράφων!

npm create rspress@latest