react-boilerplate 文档导航与工程架构实战指南从 Quickstart 到生产级部署【免费下载链接】react-boilerplate A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.项目地址: https://gitcode.com/gh_mirrors/rea/react-boilerplate本文以 react-boilerplate 仓库的 docs/README.md 为主干完整梳理该文档导航体系下的 Quickstart 启动流程、开发/构建/部署命令、目录结构约定以及 CSS、JS、SEO、测试四大技术支柱并结合仓库内 package.json、app/app.js、internals/webpack 等源码与配置补充文档索引中各专题的定位与实战要点帮助你快速判断每个文档章节解决什么问题、在什么场景下阅读。react-boilerplate 是一个面向生产环境的高可扩展、离线优先offline-first的 React 工程化脚手架。它的文档体系采用总索引 专题子文档的组织方式根目录的docs/README.md是所有技术文档的入口同时自身也包含一段浓缩的 Overview快速开始、开发、构建部署、目录结构、CSS/JS/SEO/测试概览。读懂这一份文档就等于拿到了整个脚手架的地图——下面我们逐节展开并随时对照仓库源码给出可验证的依据。一、文档索引docs 目录下每个专题讲什么docs/README.md开头的 Table of Contents 就是整份文档的地图全部指向仓库内真实存在的文档文件以下路径均已转换为仓库根目录相对路径分类文档核心内容Generaldocs/general/commands.md全部 CLI 命令详解初始化、开发、清理、生成器、构建、测试、lintingGeneraldocs/general/introduction.md《The Hitchhikers Guide》——技术栈清单、目录结构、Redux/Reselect/Saga 原理、示例应用拆解Generaldocs/general/files.md配置文件术语表.editorconfig、.gitattributes、.gitignore、CI 配置、package.json的三种职责Generaldocs/general/server-configs.md服务器配置如.htaccess等静态服务器配置Generaldocs/general/deployment.md部署指南Heroku、AWS S3、Elastic Beanstalk、服务器子目录部署Generaldocs/general/debugging.md调试技巧Generaldocs/general/faq.md常见问题Generaldocs/general/gotchas.md疑难杂症开发者常踩的坑Generaldocs/general/remove.md移除离线优先、PWA、字体加载、图片优化等可选特性Generaldocs/general/components.md从现有应用中抽取/拆分组件的方法论Testingdocs/testing/unit-testing.md单元测试Testingdocs/testing/component-testing.md组件测试Testingdocs/testing/remote-testing.md远程测试ngrok 隧道CSSdocs/css/README.mdstyled-components、Stylesheet、CSS Modules、Sass、LESS 五种样式方案及接入方式CSSdocs/css/linting.mdstylelint CSS 静态检查CSSdocs/css/sanitize.mdsanitize.css 现代 CSS 重置方案JSdocs/js/redux.mdRedux 状态管理JSdocs/js/immer.mdImmer 不可变状态JSdocs/js/reselect.mdreselect 派生数据/记忆化选择器JSdocs/js/redux-saga.mdredux-saga 异步副作用管理JSdocs/js/i18n.mdreact-intl 国际化JSdocs/js/routing.mdreact-router connected-react-router 路由JSdocs/js/async-components.md异步加载组件Maintenancedocs/maintenance/dependency.md依赖更新流程Forksdocs/forks/README.md社区分支项目介绍阅读路线建议完全新手先读 docs/general/introduction.md 建立技术栈全局观动手开发前通读 docs/general/commands.md 掌握命令遇到样式问题查 docs/css/README.md接入 Redux/Saga/路由/i18n 时逐一阅读 docs/js 下对应专题上线前研读 docs/general/deployment.md 与 docs/general/server-configs.md。二、Quickstart5 分钟跑起内置示例应用docs/README.md的 Overview 提供了一条完整的上手路径我们把每一步拆开结合仓库真实文件验证其背后发生了什么。步骤 1一键启动示例应用npm run setup npm startnpm run setup对应 package.json 中的setup: node ./internals/scripts/setup.js。它会初始化一个新项目安装依赖、删除 react-boilerplate 自身的 git 历史并重新初始化仓库。setup.js是一个自毁式脚本执行后初始化脚本本身会被移除这是为了防止误操作不可逆地破坏项目历史。npm start对应 package.json 中的start: cross-env NODE_ENVdevelopment node server启动开发服务器随后访问http://localhost:3000即可看到捆绑的示例应用Repospective——一个输入 GitHub 用户名、展示其仓库列表的演示应用。步骤 2体验三大核心能力的反馈闭环启动后文档建议你做三件事来试车输入一个 GitHub 用户名观察 Redux Redux Saga 如何协同完成异步状态更新。底层链路是HomePage 容器 派发loadReposaction → HomePage/saga.js 中takeLatest监听LOAD_REPOS并调用getRepos()→ 成功后派发reposLoaded→ reducer 更新 state →mapStateToProps驱动组件重渲染。这正好印证了 docs/js/redux-saga.md 中一个 saga 就像应用里负责副作用的后台线程的心智模型。编辑 app/components/Header/index.js把Button组件的文案改成 Features!!!。保存后无需刷新页面即可看到变化——这是 Webpack 热模块替换HMR在起作用且组件的本地 state 得以保留。点击刚改过的 Features 按钮观察 React Router 接管路由切换。由于这是单页应用SPA你可以把切换后的链接分享给局域网内的其他设备访问。步骤 3清空示例开始自己的项目npm run cleanclean脚本package.json会删除示例应用只保留编写新应用所需的最小骨架代码。与setup一样它是自毁式命令运行后无法再次执行。清理完成后就可以用内置生成器脚手架出自己的第一个功能模块npm run generate对应 package.json 的generate: plop --plopfile internals/generators/index.js底层由 Plop 驱动 internals/generators 中的模板component/、container/、language/等目录内含.hbs模板。你也可以跳过交互选择直接指定类型例如npm run generate container。三、开发、构建与部署三个核心命令Developmentnpm start启动开发服务器应用运行在http://localhost:3000。开发模式下代码修改会热更新具体实现见 server/middlewares/addDevMiddlewares.js——它组合了webpack-dev-middleware内存编译 文件监听与webpack-hot-middlewareHMR 推送webpack 配置见 internals/webpack/webpack.dev.babel.js。Building Deployingnpm run buildnpm run build对应 package.jsoncross-env NODE_ENVproduction webpack --config internals/webpack/webpack.prod.babel.js ...。它会先执行prebuildpackage.json用rimraf ./build清空旧的build目录按 internals/webpack/webpack.prod.babel.js 的配置做生产优化代码压缩terser-webpack-plugin、compression-webpack-plugin输出 gzip 资源、按路由代码分割code splitting、offline-plugin生成 Service Worker 实现离线优先等把所有产物输出到build目录。部署时只需把build目录下的全部文件上传到 Web 服务器根目录即可文档强调Upload the contents of the build folder to your web servers root folder。如果要在已有服务器的子目录下部署如https://host/web-app需要修改 internals/webpack/webpack.base.babel.js 中的output.path与output.publicPath并在 app/utils/history.js 中为createHistory传入basename——完整步骤见 docs/general/deployment.md。生产服务器本身由 server/index.js 承载npm run start:prod配合 server/middlewares/addProdMiddlewares.js 以 gzip 形式提供静态资源。四、目录结构app 是唯一需要关心的目录文档的 Structure 一节给出了明确的职责划分Theapp/directory contains your entire application code, including CSS, JavaScript, HTML and tests. The rest of the folders and files only exist to make your life easier.app/存放你全部的应用代码——CSS、JavaScript、HTML 与测试。这是开发时主要活动的目录。内部采用container/component 分层架构app/containers连接 Redux store 的智能容器组件关心数据如何工作例如App、HomePage、LanguageProvider、NotFoundPageapp/components无状态、可复用的哑组件关心界面如何呈现例如Button、Header、Footer、LoadingIndicatorapp/utils工具函数如injectReducer、injectSaga、request、history、loadableapp/translationsi18n 翻译文件en.json、de.json入口文件为 app/app.jsHTML 模板为 app/index.html。internals/工具链的发动机——webpack 配置、代码生成器、脚本、测试捆绑器。日常开发几乎不需要改动。server/开发与生产服务器配置。这种应用代码独立、工具链隔离的布局使升级脚手架工具链时不会污染业务代码。五、CSSstyled-components 与现代样式方案文档指出本项目使用 tagged template literals标签模板字符串配合styled-components编写样式你可以用模板字符串写真正的 CSS并自动获得 vendor prefix消除了组件 ↔ 样式的映射关系——样式与组件天然共置co-located样式作用域天然隔离只把页面真正用到的样式打进包里。仓库中的真实示例随处可见例如 app/components/Button/buttonStyles.js、app/components/H1/index.jsimport styled from styled-components; const H1 styled.h1 font-size: 2em; margin-bottom: 0.25em; ;在styled-components之外脚手架还预置了sanitize.css现代 CSS 重置方案区别于传统 reset入口在 app/app.js 的import sanitize.css/sanitize.css原理见 docs/css/sanitize.mdstylelintCSS 静态检查命令为npm run lint:csspackage.json配合stylelint-config-styled-components可对 styled-components 内的 CSS 规则做 lint详见 docs/css/linting.mdCSS Modules / Sass / LESS 集成方案docs/css/README.md给出了每种方案修改 internals/webpack/webpack.base.babel.js 中css-loader配置的具体 diff例如开启 CSS Modules 时改为options: { modules: true }。注意文档特别提醒CSS Modules 与普通 Stylesheet 导入方式互斥一个import ./Button.css、一个import styles from ./Button.css除非按目录拆分否则只能二选一。六、JS打包、代码分割与自动优化文档的 JS 一节阐述了脚本处理策略We bundle all your clientside scripts and chunk them into several files using code splitting where possible. We then automatically optimize your code when building for production.即开发时统一打包按需代码分割成多个 chunk生产构建时自动优化。这可以在 internals/webpack/webpack.base.babel.js公共配置与 internals/webpack/webpack.prod.babel.js生产配置中直接验证splitChunks拆分 vendor/业务代码、babel-loader配合babel/preset-env转译 ES6/ES7、terser-webpack-plugin压缩。状态管理与异步方面docs/js/README.md的定位是用Redux管理应用状态、Immer保证不可变性、reselect做记忆化派生数据、redux-saga管理异步副作用、react-router connected-react-router负责路由——每个主题都有独立文档docs/js/redux.md、docs/js/immer.md、docs/js/reselect.md、docs/js/redux-saga.md、docs/js/routing.md通过npm run generate自动生成组件、容器、saga、路由与 selector 的样板代码。应用的实际启动链路在 app/app.js 中一目了然引入babel/polyfill第 9 行为 redux-saga 的 ES6 generator 提供运行时支持创建history对象utils/history供ConnectedRouter记录浏览历史通过 app/configureStore.js 实例化 Redux storeReactDOM.render将App /以Provider连接 Redux store、LanguageProvider国际化、ConnectedRouter路由三层包裹后挂载到div#app第 49-60 行支持 HMRreducer、注入式 saga、组件、容器、i18n 消息均可热更新、i18n 初始化以及 offline-plugin 的离线优先支持。七、SEOreact-helmet 管理文档头标签文档明确项目使用react-helmet管理 document head 标签title、meta、link等。依赖声明在 package.jsonreact-helmet: 6.0.0-beta。这让 SPA 也能为支持 JS 索引的搜索引擎如 Google提供可抓取的头部信息。各页面/容器如需设置标题、描述等 SEO 标签直接在组件内渲染Helmet组件即可。八、Testing测试体系的三种层次docs/README.md将测试分成三个层次并指出详细说明见 docs/testing/README.md浏览器/远程测试Browser testingnpm run start:tunnel对应 package.jsoncross-env NODE_ENVdevelopment ENABLE_TUNNELtrue node server。它启动开发服务器并通过ngrok创建临时公网 URL依赖 package.json 中的ngrok让本地运行的应用在全球任何设备上可访问——非常适合多设备真机测试和客户演示。单元测试Unit testing单元测试文件与被测代码就近存放放在被测组件旁的tests/目录里文档原文Unit tests live intest/directories right next to the components being tested以.test.js结尾。运行方式npm run test对应 package.json 的test: cross-env NODE_ENVtest jest --coverage基于 Jest 并开启覆盖率统计pretestpackage.json会先清理 coverage 目录并执行 lint。仓库内几乎每个组件/容器都有配对测试例如 app/components/Button/tests、app/containers/HomePage/tests测试匹配器与模块别名等配置见 jest.config.js。如果你想只跑特定测试可以追加过滤参数npm test -- Button只运行名称匹配 Button 的测试用例。配套命令还有npm run test:watchpackage.json监听文件变化自动重跑测试npm run analyzepackage.json生成stats.json供 webpack analyzer 可视化分析依赖与 chunk 体积。九、把文档变成你的开发手册推荐查阅顺序总结一份结合仓库源码的查阅路径供日常开发随取随用刚克隆项目执行npm run setup npm start跑通示例应用对照 app/containers/HomePage 源码理解输入用户名 → saga 拉取 → reducer 更新 → 组件渲染的完整数据流开始写代码前执行npm run clean清理示例用npm run generate生成第一个 container/component目录规范参考 docs/general/introduction.md 的 Project Structure 章节接状态/异步/路由逐个阅读 docs/js 下的redux.md、reselect.md、redux-saga.md、routing.md、async-components.md并对照 app/configureStore.js、app/utils 源码验证实现写样式以 styled-components 为主需要 CSS Modules/Sass/LESS 时按 docs/css/README.md 的 diff 修改 internals/webpack/webpack.base.babel.js补测试参考仓库内各组件的tests/目录与 docs/testing 三篇专题上线前通读 docs/general/commands.md构建/生产命令、docs/general/deployment.mdHeroku/AWS 部署、docs/general/server-configs.md服务器配置踩坑求助先查 docs/general/gotchas.md 与 docs/general/faq.md精简功能不需要离线优先/i18n/saga 等特性时按 docs/general/remove.md、docs/js/i18n.md、docs/css/remove.md 的步骤安全移除。docs/README.md作为整个文档体系的入口既给出了地图也给出了最短路径按照 Overview 的 Quickstart 走一遍再按各专题文档逐层深入你就能把这套生产级脚手架的每一项能力——热更新、代码分割、离线优先、国际化、测试与部署——真正用起来。【免费下载链接】react-boilerplate A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.项目地址: https://gitcode.com/gh_mirrors/rea/react-boilerplate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 react-boilerplate 文档导航与工程架构实战指南：从 Quickstart 到生产级部署
react-boilerplate 文档导航与工程架构实战指南从 Quickstart 到生产级部署【免费下载链接】react-boilerplate A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.项目地址: https://gitcode.com/gh_mirrors/rea/react-boilerplate本文以 react-boilerplate 仓库的 docs/README.md 为主干完整梳理该文档导航体系下的 Quickstart 启动流程、开发/构建/部署命令、目录结构约定以及 CSS、JS、SEO、测试四大技术支柱并结合仓库内 package.json、app/app.js、internals/webpack 等源码与配置补充文档索引中各专题的定位与实战要点帮助你快速判断每个文档章节解决什么问题、在什么场景下阅读。react-boilerplate 是一个面向生产环境的高可扩展、离线优先offline-first的 React 工程化脚手架。它的文档体系采用总索引 专题子文档的组织方式根目录的docs/README.md是所有技术文档的入口同时自身也包含一段浓缩的 Overview快速开始、开发、构建部署、目录结构、CSS/JS/SEO/测试概览。读懂这一份文档就等于拿到了整个脚手架的地图——下面我们逐节展开并随时对照仓库源码给出可验证的依据。一、文档索引docs 目录下每个专题讲什么docs/README.md开头的 Table of Contents 就是整份文档的地图全部指向仓库内真实存在的文档文件以下路径均已转换为仓库根目录相对路径分类文档核心内容Generaldocs/general/commands.md全部 CLI 命令详解初始化、开发、清理、生成器、构建、测试、lintingGeneraldocs/general/introduction.md《The Hitchhikers Guide》——技术栈清单、目录结构、Redux/Reselect/Saga 原理、示例应用拆解Generaldocs/general/files.md配置文件术语表.editorconfig、.gitattributes、.gitignore、CI 配置、package.json的三种职责Generaldocs/general/server-configs.md服务器配置如.htaccess等静态服务器配置Generaldocs/general/deployment.md部署指南Heroku、AWS S3、Elastic Beanstalk、服务器子目录部署Generaldocs/general/debugging.md调试技巧Generaldocs/general/faq.md常见问题Generaldocs/general/gotchas.md疑难杂症开发者常踩的坑Generaldocs/general/remove.md移除离线优先、PWA、字体加载、图片优化等可选特性Generaldocs/general/components.md从现有应用中抽取/拆分组件的方法论Testingdocs/testing/unit-testing.md单元测试Testingdocs/testing/component-testing.md组件测试Testingdocs/testing/remote-testing.md远程测试ngrok 隧道CSSdocs/css/README.mdstyled-components、Stylesheet、CSS Modules、Sass、LESS 五种样式方案及接入方式CSSdocs/css/linting.mdstylelint CSS 静态检查CSSdocs/css/sanitize.mdsanitize.css 现代 CSS 重置方案JSdocs/js/redux.mdRedux 状态管理JSdocs/js/immer.mdImmer 不可变状态JSdocs/js/reselect.mdreselect 派生数据/记忆化选择器JSdocs/js/redux-saga.mdredux-saga 异步副作用管理JSdocs/js/i18n.mdreact-intl 国际化JSdocs/js/routing.mdreact-router connected-react-router 路由JSdocs/js/async-components.md异步加载组件Maintenancedocs/maintenance/dependency.md依赖更新流程Forksdocs/forks/README.md社区分支项目介绍阅读路线建议完全新手先读 docs/general/introduction.md 建立技术栈全局观动手开发前通读 docs/general/commands.md 掌握命令遇到样式问题查 docs/css/README.md接入 Redux/Saga/路由/i18n 时逐一阅读 docs/js 下对应专题上线前研读 docs/general/deployment.md 与 docs/general/server-configs.md。二、Quickstart5 分钟跑起内置示例应用docs/README.md的 Overview 提供了一条完整的上手路径我们把每一步拆开结合仓库真实文件验证其背后发生了什么。步骤 1一键启动示例应用npm run setup npm startnpm run setup对应 package.json 中的setup: node ./internals/scripts/setup.js。它会初始化一个新项目安装依赖、删除 react-boilerplate 自身的 git 历史并重新初始化仓库。setup.js是一个自毁式脚本执行后初始化脚本本身会被移除这是为了防止误操作不可逆地破坏项目历史。npm start对应 package.json 中的start: cross-env NODE_ENVdevelopment node server启动开发服务器随后访问http://localhost:3000即可看到捆绑的示例应用Repospective——一个输入 GitHub 用户名、展示其仓库列表的演示应用。步骤 2体验三大核心能力的反馈闭环启动后文档建议你做三件事来试车输入一个 GitHub 用户名观察 Redux Redux Saga 如何协同完成异步状态更新。底层链路是HomePage 容器 派发loadReposaction → HomePage/saga.js 中takeLatest监听LOAD_REPOS并调用getRepos()→ 成功后派发reposLoaded→ reducer 更新 state →mapStateToProps驱动组件重渲染。这正好印证了 docs/js/redux-saga.md 中一个 saga 就像应用里负责副作用的后台线程的心智模型。编辑 app/components/Header/index.js把Button组件的文案改成 Features!!!。保存后无需刷新页面即可看到变化——这是 Webpack 热模块替换HMR在起作用且组件的本地 state 得以保留。点击刚改过的 Features 按钮观察 React Router 接管路由切换。由于这是单页应用SPA你可以把切换后的链接分享给局域网内的其他设备访问。步骤 3清空示例开始自己的项目npm run cleanclean脚本package.json会删除示例应用只保留编写新应用所需的最小骨架代码。与setup一样它是自毁式命令运行后无法再次执行。清理完成后就可以用内置生成器脚手架出自己的第一个功能模块npm run generate对应 package.json 的generate: plop --plopfile internals/generators/index.js底层由 Plop 驱动 internals/generators 中的模板component/、container/、language/等目录内含.hbs模板。你也可以跳过交互选择直接指定类型例如npm run generate container。三、开发、构建与部署三个核心命令Developmentnpm start启动开发服务器应用运行在http://localhost:3000。开发模式下代码修改会热更新具体实现见 server/middlewares/addDevMiddlewares.js——它组合了webpack-dev-middleware内存编译 文件监听与webpack-hot-middlewareHMR 推送webpack 配置见 internals/webpack/webpack.dev.babel.js。Building Deployingnpm run buildnpm run build对应 package.jsoncross-env NODE_ENVproduction webpack --config internals/webpack/webpack.prod.babel.js ...。它会先执行prebuildpackage.json用rimraf ./build清空旧的build目录按 internals/webpack/webpack.prod.babel.js 的配置做生产优化代码压缩terser-webpack-plugin、compression-webpack-plugin输出 gzip 资源、按路由代码分割code splitting、offline-plugin生成 Service Worker 实现离线优先等把所有产物输出到build目录。部署时只需把build目录下的全部文件上传到 Web 服务器根目录即可文档强调Upload the contents of the build folder to your web servers root folder。如果要在已有服务器的子目录下部署如https://host/web-app需要修改 internals/webpack/webpack.base.babel.js 中的output.path与output.publicPath并在 app/utils/history.js 中为createHistory传入basename——完整步骤见 docs/general/deployment.md。生产服务器本身由 server/index.js 承载npm run start:prod配合 server/middlewares/addProdMiddlewares.js 以 gzip 形式提供静态资源。四、目录结构app 是唯一需要关心的目录文档的 Structure 一节给出了明确的职责划分Theapp/directory contains your entire application code, including CSS, JavaScript, HTML and tests. The rest of the folders and files only exist to make your life easier.app/存放你全部的应用代码——CSS、JavaScript、HTML 与测试。这是开发时主要活动的目录。内部采用container/component 分层架构app/containers连接 Redux store 的智能容器组件关心数据如何工作例如App、HomePage、LanguageProvider、NotFoundPageapp/components无状态、可复用的哑组件关心界面如何呈现例如Button、Header、Footer、LoadingIndicatorapp/utils工具函数如injectReducer、injectSaga、request、history、loadableapp/translationsi18n 翻译文件en.json、de.json入口文件为 app/app.jsHTML 模板为 app/index.html。internals/工具链的发动机——webpack 配置、代码生成器、脚本、测试捆绑器。日常开发几乎不需要改动。server/开发与生产服务器配置。这种应用代码独立、工具链隔离的布局使升级脚手架工具链时不会污染业务代码。五、CSSstyled-components 与现代样式方案文档指出本项目使用 tagged template literals标签模板字符串配合styled-components编写样式你可以用模板字符串写真正的 CSS并自动获得 vendor prefix消除了组件 ↔ 样式的映射关系——样式与组件天然共置co-located样式作用域天然隔离只把页面真正用到的样式打进包里。仓库中的真实示例随处可见例如 app/components/Button/buttonStyles.js、app/components/H1/index.jsimport styled from styled-components; const H1 styled.h1 font-size: 2em; margin-bottom: 0.25em; ;在styled-components之外脚手架还预置了sanitize.css现代 CSS 重置方案区别于传统 reset入口在 app/app.js 的import sanitize.css/sanitize.css原理见 docs/css/sanitize.mdstylelintCSS 静态检查命令为npm run lint:csspackage.json配合stylelint-config-styled-components可对 styled-components 内的 CSS 规则做 lint详见 docs/css/linting.mdCSS Modules / Sass / LESS 集成方案docs/css/README.md给出了每种方案修改 internals/webpack/webpack.base.babel.js 中css-loader配置的具体 diff例如开启 CSS Modules 时改为options: { modules: true }。注意文档特别提醒CSS Modules 与普通 Stylesheet 导入方式互斥一个import ./Button.css、一个import styles from ./Button.css除非按目录拆分否则只能二选一。六、JS打包、代码分割与自动优化文档的 JS 一节阐述了脚本处理策略We bundle all your clientside scripts and chunk them into several files using code splitting where possible. We then automatically optimize your code when building for production.即开发时统一打包按需代码分割成多个 chunk生产构建时自动优化。这可以在 internals/webpack/webpack.base.babel.js公共配置与 internals/webpack/webpack.prod.babel.js生产配置中直接验证splitChunks拆分 vendor/业务代码、babel-loader配合babel/preset-env转译 ES6/ES7、terser-webpack-plugin压缩。状态管理与异步方面docs/js/README.md的定位是用Redux管理应用状态、Immer保证不可变性、reselect做记忆化派生数据、redux-saga管理异步副作用、react-router connected-react-router负责路由——每个主题都有独立文档docs/js/redux.md、docs/js/immer.md、docs/js/reselect.md、docs/js/redux-saga.md、docs/js/routing.md通过npm run generate自动生成组件、容器、saga、路由与 selector 的样板代码。应用的实际启动链路在 app/app.js 中一目了然引入babel/polyfill第 9 行为 redux-saga 的 ES6 generator 提供运行时支持创建history对象utils/history供ConnectedRouter记录浏览历史通过 app/configureStore.js 实例化 Redux storeReactDOM.render将App /以Provider连接 Redux store、LanguageProvider国际化、ConnectedRouter路由三层包裹后挂载到div#app第 49-60 行支持 HMRreducer、注入式 saga、组件、容器、i18n 消息均可热更新、i18n 初始化以及 offline-plugin 的离线优先支持。七、SEOreact-helmet 管理文档头标签文档明确项目使用react-helmet管理 document head 标签title、meta、link等。依赖声明在 package.jsonreact-helmet: 6.0.0-beta。这让 SPA 也能为支持 JS 索引的搜索引擎如 Google提供可抓取的头部信息。各页面/容器如需设置标题、描述等 SEO 标签直接在组件内渲染Helmet组件即可。八、Testing测试体系的三种层次docs/README.md将测试分成三个层次并指出详细说明见 docs/testing/README.md浏览器/远程测试Browser testingnpm run start:tunnel对应 package.jsoncross-env NODE_ENVdevelopment ENABLE_TUNNELtrue node server。它启动开发服务器并通过ngrok创建临时公网 URL依赖 package.json 中的ngrok让本地运行的应用在全球任何设备上可访问——非常适合多设备真机测试和客户演示。单元测试Unit testing单元测试文件与被测代码就近存放放在被测组件旁的tests/目录里文档原文Unit tests live intest/directories right next to the components being tested以.test.js结尾。运行方式npm run test对应 package.json 的test: cross-env NODE_ENVtest jest --coverage基于 Jest 并开启覆盖率统计pretestpackage.json会先清理 coverage 目录并执行 lint。仓库内几乎每个组件/容器都有配对测试例如 app/components/Button/tests、app/containers/HomePage/tests测试匹配器与模块别名等配置见 jest.config.js。如果你想只跑特定测试可以追加过滤参数npm test -- Button只运行名称匹配 Button 的测试用例。配套命令还有npm run test:watchpackage.json监听文件变化自动重跑测试npm run analyzepackage.json生成stats.json供 webpack analyzer 可视化分析依赖与 chunk 体积。九、把文档变成你的开发手册推荐查阅顺序总结一份结合仓库源码的查阅路径供日常开发随取随用刚克隆项目执行npm run setup npm start跑通示例应用对照 app/containers/HomePage 源码理解输入用户名 → saga 拉取 → reducer 更新 → 组件渲染的完整数据流开始写代码前执行npm run clean清理示例用npm run generate生成第一个 container/component目录规范参考 docs/general/introduction.md 的 Project Structure 章节接状态/异步/路由逐个阅读 docs/js 下的redux.md、reselect.md、redux-saga.md、routing.md、async-components.md并对照 app/configureStore.js、app/utils 源码验证实现写样式以 styled-components 为主需要 CSS Modules/Sass/LESS 时按 docs/css/README.md 的 diff 修改 internals/webpack/webpack.base.babel.js补测试参考仓库内各组件的tests/目录与 docs/testing 三篇专题上线前通读 docs/general/commands.md构建/生产命令、docs/general/deployment.mdHeroku/AWS 部署、docs/general/server-configs.md服务器配置踩坑求助先查 docs/general/gotchas.md 与 docs/general/faq.md精简功能不需要离线优先/i18n/saga 等特性时按 docs/general/remove.md、docs/js/i18n.md、docs/css/remove.md 的步骤安全移除。docs/README.md作为整个文档体系的入口既给出了地图也给出了最短路径按照 Overview 的 Quickstart 走一遍再按各专题文档逐层深入你就能把这套生产级脚手架的每一项能力——热更新、代码分割、离线优先、国际化、测试与部署——真正用起来。【免费下载链接】react-boilerplate A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.项目地址: https://gitcode.com/gh_mirrors/rea/react-boilerplate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考