Home Page > News List > cloudtech >> cloudtech

Rspress1.0 officially released

cloudtech Source: Network

Echa202310 ByteDance Web Infra Rspress 1.0 Web KPIRspress Rspress Rspress Rspress Rspress Rspress MDX Rspress Rspress Rspress Rspress SSG RspressRspress https://rspress

Echa

202310 ByteDance Web Infra Rspress 1.0 Web KPI

Rspress Rspress

  1. Rspress
  2. Rspress
  3. Rspress
  4. Rspress MDX
  5. Rspress
  6. Rspress
  7. Rspress
  8. Rspress SSG
  9. Rspress

Rspress

https://rspress.dev/

Githubhttps://github.com/web-infra-dev/rspress


Rspress

Rspack ByteDance Web Infra Rust Web Webpack

Rspress Rspack React Rspress

Rspack

  • Dev npm run dev 10 dev start
  • Build npm run build CI/CD 20 30
  • Webpack Webpack
  • Rspack

ByteDance Web Infra ByteDance Web Infra Rspack

Rspress

Rspress

  • MDX MDX React
  • API

SSG

Rspress

SSG

Rspress Rspress RspressDocusaurus Nextra




Rust Rust

  • Bundler Bundler webpackRollup bundler Rspress RspackRspack Rust Bundler 5 10
  • Markdown SSG Markdown Rust Rspress Markdown @rspress/mdx-rs JS 20

Rspress Rust SSG

Rspress MDX

Rspress MDX

MDX React

Rspress

Rspress

  • HTML
  • Demo Playground

Rspress

Rspress

  • Rspack MDX

Rspress

Rspress

Rspress

  • _meta.json 
["introduction", "install", "start"]
  • Rspress nav sidebar

  3. rspress.config.ts /

Rspress TypeDoc TypeDoc json nav sidebar

MDX

MDX Markdown Markdown React

Rspress

  • FrontMatter

SSG

Rspress SSG HTML HTML

Github PagesNetlifyVercel

SSG HTML

i18n

Rspress

  • I18n
  • I18n

I18n

Rspress 

// import { defineConfig } from 'rspress/config';export default defineConfig({  multiVersion: {    default: 'v1',    versions: ['v1', 'v2'],  },});
// docs v1    README.md    guide        README.md v2     README.md     guide         README.md

Rspress FlexSearch

Rspress

  1. documate AI 
// theme/index.tsximport Theme from 'rspress/theme';import { NoSSR } from 'rspress/runtime';import { Documate } from '@documate/react';import '@documate/react/dist/style.css';const Layout = () => (  <Theme.Layout    afterNavTitle={      <NoSSR>        <Documate endpoint="" />      </NoSSR>    }  />);export default {  ...Theme,  Layout,};export * from 'rspress/theme';

  1. Layout Rspress Runtime API usePageData

Rspress

Rspress preview preview mdx 

import React from 'react';import { Tag, Space } from '@arco-design/web-react';import '@arco-design/web-react/dist/css/arco.css';const COLORS = [  'red',  'orangered',  'orange',  'gold',  'lime',  'green',  'cyan',  'blue',  'arcoblue',  'purple',  'pinkpurple',  'magenta',  'gray',];export default () => {  return (    <Space>      {COLORS.map((color, i) => (        <Tag key={i} color={color}>          {color}        </Tag>      ))}    </Space>  );};

demo Playground

playground .mdx

playground

View Transition API API Rspress View Transition SPA 

export default defineConfig({  themeConfig: {    //  View Transition     enableContentAnimation: true,  },});

Rspress SSG

Docusaurus

Docusaurus Meta SSG Rspress React MDX Rspress Docusaurus

  1. Rspress Rspress Rust / Docusaurus 5 ~ 10
  2. Rspress Rspress
  3. Rspress Bundler webpackRspack BundlerDocusaurus Bundler Rspress Bundler builderConfig.html.tags <head> Bundler html-webpack-plugin

Nextra

Nextra Vercel SSG Rspress React MDXRspress Nextra

  1. Rspress Docusaurus
  2. Rspress Nextra Next.js SSG Next.js SSG HTML Next.js Nextra ( next start ) Rspress

VitePress

VitePress Vite Vue Rspress VitePress

  1. Rspress React VitePress Vue
  2. Rspress MDX VitePress Markdown Markdown Vue
  3. Rspress VitePress VitePress Rollup JavaScript Rspress

Rspress

1.

Rspress :

npm create rspress@latestyarn create rspress@latestpnpm create rspress@latestbun create rspress@latest

Rspress 

mkdir rspress-app && cd rspress-app

npm init -y npmyarn pnpm Rspress:

npm install rspress typescript ts-node -D yarn add rspress typescript ts-node -Dpnpm install rspress typescript ts-node -Dbun add rspress typescript ts-node -D

:

mkdir docs && echo '# Hello World' > docs/index.md

package.json :

{  "scripts": {    "dev": "rspress dev",    "build": "rspress build",    "preview": "rspress preview"  }}

rspress.config.ts:

import { defineConfig } from 'rspress/config';export default defineConfig({  //   root: 'docs',});

tsconfig.json:

{  "compilerOptions": {    "esModuleInterop": true,    "jsx": "react-jsx"  }}

Dev Server

:

npm run dev

Rspress

:

npm run build

Rspress doc_build

:

npm run preview

Rspress

,,;

,,;

,,,

10 20


Disclaimer: The content of this article is sourced from the internet. The copyright of the text, images, and other materials belongs to the original author. The platform reprints the materials for the purpose of conveying more information. The content of the article is for reference and learning only, and should not be used for commercial purposes. If it infringes on your legitimate rights and interests, please contact us promptly and we will handle it as soon as possible! We respect copyright and are committed to protecting it. Thank you for sharing.(Email:[email protected])

Rspress1.0 officially released

Guess you like