rockpack

零配置搭好 React SSR 与质量门禁,开箱即写规范代码

开源 🏷️完全免费 🔧 仅开源项目,无在线服务,需自行部署 编程开发 🍴 复刻 22 👀 关注 16
访问官网 ↗ GitHub ↗
GitHub 星标 ★ 1170
维护状态 较活跃
是否开源 开源
定价模式 🏷️完全免费 开源免费

项目预览

rockpack 项目界面预览图
图片来源:GitHub 官方仓库名片

项目数据

分类编程开发
开发团队AlexSergey
定价模式🏷️完全免费
价格说明开源免费
访问状态🔧 仅开源项目,无在线服务,需自行部署
是否开源是
开源协议NOASSERTION
主要语言TypeScript
技术栈/模型boilerplate,claude-code,codestyle,eslint,jest,reactjs,ssr,typescript,webpack
GitHub 星标★ 1170
上线时间2019-10-26 00:00:00
代码更新2026-10-30
仓库体积53.5 MB
本站数据更新2026-11-13
维护状态较活跃
收录时间2026-11-13
浏览次数0

项目介绍

Rockpack 是一套面向 React 应用的零配置工程脚手架,目标是把项目初始化、服务端渲染和代码质量约束一次性打包好。它内置 SSR 支持,开发者无需手动搭建 Webpack、Babel、路由与数据预取之间的衔接,开箱即可得到可运行的渲染链路。项目同时集成 ESLint、Jest 等质量工具,并通过预设的目录结构与规则形成自动化质量门禁,让代码风格、测试与构建在提交前就被约束。其另一特点是面向 AI 辅助开发优化了项目结构,使代码生成工具更容易理解模块边界与约定,从而在人工编写与 AI 生成混合的场景下保持整洁一致。整体定位是减少样板配置、降低团队协作与 AI 协作中的工程摩擦,适合希望快速启动规范 React SSR 项目的前端团队。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化,观测越久曲线越完整

数据来源:GitHub API 逐日快照 · 收录于 2026-11-13 · 当前星标 ★ 1170

使用教程

难度:入门 约 10 分钟 部署方式:命令行工具 6 步

⚠ 该项目 README 未提供完整安装说明,以下步骤为通用流程,请以官方文档为准。

环境要求

  • Node.js 运行环境(README 未标注具体版本,建议使用当前 LTS 版本)
  • npm 或 yarn 等包管理器
  • 如需阅读源码或提交改动,需安装 Git
  • 现代浏览器,用于访问官方文档与运行开发服务器

安装与启动步骤

  1. 1准备 Node 环境

    README 未给出具体版本号,请先安装 Node.js LTS 并在终端确认 npm 可用,这是脚手架运行的前提。

    node -v
    npm -v
  2. 2获取项目仓库

    克隆 Rockpack 仓库,便于阅读脚手架源码与模板目录结构;仅使用脚手架时可跳过。

    git clone https://github.com/AlexSergey/rockpack.git
    cd rockpack
  3. 3阅读官方快速上手

    README 的 Fast setup 指向官网 Getting Started 章节,实际初始化命令以该文档为准,此处不臆造命令。

  4. 4执行脚手架初始化

    按官网文档给出的单条脚手架命令在空目录中生成项目,README 称一条命令即可完成全部配置。

  5. 5确认内置工具链

    生成的项目已预置 Webpack、ESLint、Prettier、TypeScript 与 Jest,无需手动配置;具体启动与测试脚本见生成项目的 package.json。

  6. 6按需接入现有项目

    Rockpack 为模块化设计,已有项目可只引入需要的包,无需整体迁移。

关键配置

配置项必填说明示例
CLAUDE.md否预置的质量规则与协作约定文件,供 AI 编码工具读取项目根目录下的 CLAUDE.md

如何确认成功

在生成的项目中按文档启动开发服务器,页面可正常渲染,且 Jest 测试可执行通过。

常见问题

Q:README 里没有安装命令怎么办?

A:README 的安装步骤指向官网 Getting Started 页面,请以官网文档给出的脚手架命令为准,不要凭猜测执行未知命令。

Q:需要手动配置 Webpack 或 Babel 吗?

A:不需要。Rockpack 为零配置方案,Webpack、Babel、ESLint、Jest 均已预置,需要时可在不 eject 的前提下扩展。

Q:已有 React 项目能使用吗?

A:可以。Rockpack 采用模块化设计,可只引入所需的单个包,例如仅添加 SSR 或构建能力。

Q:服务端渲染要自己写吗?

A:不用。SSR 开箱可用,包含注水与 Node.js 服务端渲染链路,无需自行衔接路由与数据预取。

Q:模板自带测试吗?

A:每个模板都附带已配置好的 Jest 测试环境,生成代码后可立即运行测试验证。

注意事项

  • README 节选未给出任何可复制的安装或启动命令,本教程仅包含环境准备与文档查阅步骤,实际命令请以官网为准。
  • 脚手架默认生成的目录结构与命名约定是质量门禁的一部分,修改前建议先了解其约定。
  • 扩展 Webpack、ESLint 或 Jest 配置时不需要 eject,按官方文档的扩展方式修改即可。

核心亮点

  • 内置 SSR 全链路配置,省去手动串联 Webpack、路由与数据预取的样板工作
  • 预置 ESLint、Jest 与目录规范,形成可执行的自动化质量门禁
  • 项目结构针对 AI 辅助编码做了约定优化,生成代码更易融入现有模块

不足之处

  • 基于 Webpack 的构建链路相对偏重,与 Vite 等新工具链相比启动与热更新体验有差距
  • 零配置意味着深度定制时需理解其封装层,灵活性与可调空间受限
  • 社区规模与生态插件数量仍处于成长阶段,遇到问题可参考的资料有限

适用场景

  • 新项目快速搭建带 SSR 的 React 应用骨架
  • 团队统一代码规范与测试门禁,减少评审摩擦
  • 在 AI 辅助编码场景下提供结构清晰、约定明确的项目底座

替代项目

Next.js、Remix、Vite

上一篇:Persona-Forge

下一篇:ckb

同类项目推荐

kilo 开源

在 IDE 里用 AI 代理,边写边改,交付快一倍

Kilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster···

★ 203 2026-08-09
chatGL 开源

用大白话描述,AI 直接生成 GLSL 着色器代码

GLSL shader generator using GPT-3

★ 62 2026-08-09
MUSUBI 开源

轻量级开发工具,快速搭建原型

★ 79 2026-08-09
ogcode 开源

省 token 的 AI 编码工作台,长会话成本直降 70%

An open-source, local-first AI teammate and agent operating environment for turning ···

★ 148 2026-08-09
Claude-ast-index-search 开源

给 AI 装个代码索引,搜符号省一半 token

Cli allows AST search, ~40-50% economy tokens. Claude/Codex/Cursor searches (suitabl···

★ 589 2026-10-11
ai-coding-guide 开源

66个Claude Code技巧,9款AI工具实战,拿来即用提升编码效率

AI 编程工具实战指南 — 66 个 Claude Code 技巧 + 10 款工具最佳实践 + 可复制配置模板 |···

★ 553 2026-08-09
HolyCode 开源

把 AI 编程工具装进一个工作站,多智能体帮你并行干活

AI coding workstation: OpenCode + Claude subscription support + 30+ tools + headless···

★ 83 2026-08-09
spec-kitty 开源

给 AI 编码装上规格看板,多任务并行不打架

Spec-Driven Development with organizational governance. Specs tell AI agents what to···

★ 1720 2026-09-17
RPG-ZeroRepo 开源

一句话生成整仓库代码,先规划再施工不跑偏

[ICLR 2026] RPG: A Repository Planning Graph for Unified and Scalable Codebase Gener···

★ 552 2026-09-16