rcpress- 基於React的文檔生成器

前言

之前開發vue組件時，寫文檔使用的是vuepress，以後轉戰react後以爲沒有順手的文檔生成工具，就模仿vuepress寫了這個rcpress。

特色

• RcPress 是一個基於 React.js 的靜態文檔生成器。
• 文檔UI是模仿 ant design 官網
• 功能配置模仿Vuepress
• 支持mdx，能夠在markdown中使用jsx。
• 支持service worker。
• 生產模式下支持生成靜態html頁面和打包spa兩種模式。
• 開發模式下支持ssr，spa兩種模式。

技術棧

• ReactJs
• Ant Design
• mdx
• remark
• prismjs
• service worker

快速上手

安裝

安裝命令行工具 @rcpress/cli

yarn global add @rcpress/cli

# 或者若是你用npm

npm i  @rcpress/cli -g

用法

建立目錄以及markdown文件

# 建立 docs 目錄(docs是默認的文檔目錄)
mkdir docs

#建立markdown文件
echo '# Hello RcPress' > docs/README.md

運行

# 啓動spa模式的服務
rcpress dev
# 啓動服務端渲染的服務
rcpress server

# 訪問`3000`端口便可。

打包構建

# 在生產環境下構建spa
rcpress build
# 在生產環境下構建ssr而且聲稱靜態html文件
rcpress generate

文檔

獲取詳細的文檔， 推薦訪問網站上的嚮導一節。

首頁截圖

與vuepress的對比

首先說下不一樣點

• rcpress 使用了 react.js 驅動，而 vuepress 是由 vue 驅動的。
• rcpress 是使用了 Ant Design 做爲 UI 框架，而 vuepress 是使用了自定義的樣式。

說下欠缺的功能

• 沒有plugin(插件)這個概念，固然之後能夠考慮加入。

說下優點

• 能夠在文檔裏使用全部ant design的組件，不用本身寫。
• 支持在開發模式下運行spa，ssr兩種模式。vuepress貌似只能運行spa模式。
• 支持生產spa打包。

相關連接

• GitHub 倉庫地址： rcpress
• 文檔地址： rcpress