Brunch with Chaplin 骨架项目实战指南：基于 Brunch 与 Chaplin 的 HTML5 应用脚手架-北京尧图网络

构建工具前端【免费下载链接】brunch Web applications made easy. Since 2011.项目地址https://gitcode.com/gh_mirrors/br/brunch点击查看免费下载本指南以当前仓库 packages/skeletons/brunch-with-chaplin 中的 README 为骨架系统讲解该 HTML5 应用脚手架的项目结构、安装运行方式、核心特性并结合仓库内的源码控制器、视图、路由、生成器等深入剖析其架构设计。读完本文你将掌握如何用brunch new初始化 Chaplin 风格的单页应用理解 Backbone Chaplin 元框架的 Mediator、Controller、Route、View 协作模式以及如何借助内置生成器快速搭建新功能模块。项目定位一个开箱即用的 Chaplin 骨架Brunch with Chaplin下文简称 BWC是一个基于 Brunch前端构建工具和 ChaplinBackbone 之上的元框架构建的 HTML5 应用脚手架skeleton / boilerplate自 2011 年起由 Brunch 生态维护。它并非一个完整可用的应用而是骨架——提供约定俗成的目录结构、基础架构类与构建配置让你在此基础上快速起步。该骨架要求Brunch 1.7仓库内devDependencies中声明的是brunch ~2.3.0并配套javascript-brunch、coffee-script-brunch、css-brunch、stylus-brunch、handlebars-brunch、uglify-js-brunch、clean-css-brunch、auto-reload-brunch等构建插件见 package.json这意味着默认技术栈为 CoffeeScript Stylus Handlebars。同时依赖chaplin ~1.1.0、jquery ~2.2.0、exoskeleton ~0.6.0作为 Backbone 兼容实现、lodash ~2.2.0、console-polyfill与normalize.css见 package.json。安装与初始化BWC 提供两种初始化方式手动克隆直接克隆仓库本仓库中对应目录为 packages/skeletons/brunch-with-chaplin拿到的是骨架源文件。通过 Brunch 脚手架命令brunch new gh:paulmillr/brunch-with-chaplinBrunch 会从 GitHub 上拉取该骨架并初始化一个新项目。初始化后还需要安装三套环境依赖Node.js如 OS X 下brew install node——运行 Brunch 的基础Brunchnpm install -g brunch全局安装构建工具Bowernpm install -g bower骨架的bower.json声明了前端依赖项目依赖在项目根目录执行npm install bower install安装 Brunch 插件与 Bower 依赖。日常开发与构建命令README 明确给出两条核心命令brunch watch --server监视项目文件变化并持续增量重建continuous rebuild同时启动内置 HTTP 服务器并启用 pushState 模式的历史管理——这保证刷新页面时路由由 Chaplin 前端接管服务器无需为每个 URL 做重定向配置。brunch build --production生产构建输出压缩minified后的产物。package.json 中还预置了两个 npm scriptsscripts: { start: brunch watch --server, test: brunch test }即npm start等价于开发服务器npm test触发 Brunch 的测试流程。目录约定写代码在 app/产物在 public/BWC 遵循 Brunch 的目录约定public/目录完全自动生成由 HTTP 服务器直接提供。开发中不需要手动维护任何一次构建都会被重建覆盖。你的代码写在app/目录包括控制器controllers/、视图views/、模型models/、库函数lib/、路由routes.coffee、入口initialize.coffee与中介者mediator.coffee。静态资源放在app/assets/构建时会被原样复制到public/。骨架自带的app/assets/index.html就是入口 HTML。该目录约定由 brunch-config.coffee 落地exports.config files: javascripts: joinTo: javascripts/app.js: /^app/ javascripts/vendor.js: /^(?!app)/ stylesheets: joinTo: stylesheets/app.css templates: joinTo: javascripts/app.js解读这段配置以app/开头的源码文件打包进javascripts/app.js其余即vendor/、npm 依赖等打包进javascripts/vendor.js样式统一输出为stylesheets/app.cssHandlebars 模板被预编译后并入app.js这也是 views/base/view.coffee 中getTemplateFunction能直接返回template的原因——模板已被 Brunch 预编译为函数。npm 依赖还通过配置做了别名与全局注入npm: aliases: backbone: exoskeleton globals: _cp: console-polyfill $: jquery styles: normalize.css: [normalize.css]backbone模块别名指向exoskeletonChaplin 兼容的精简实现console-polyfill、jquery以全局变量_cp、$暴露normalize.css的样式会被并入构建产物。与官方 Chaplin Boilerplate 的差异README 明确指出该骨架与 Chaplin BoilerplateChaplin 官方样板几乎相同仅有两处主要差异新增了 Header页头视图——骨架中体现为 views/home/header-view.coffee 与对应模板 header.hbs。使用 CommonJS 而非 AMD——原因在于更易使用与调试。这一点在源码中有直接体现所有模块都以require .../module.exports ...的 CommonJS 风格编写例如 application.coffee、routes.coffee。核心特性一览README 列出的特性可归类为四层1. 默认技术栈内置 HTML5Boilerplate 风格的 HTML 与 CSS默认语言为 CoffeeScript Stylus HandlebarsREADME 注明你可以随意更换为其他语言——这正是 Brunch 插件体系的灵活性以 Backbone 作为 MVC 基础库、Chaplin 作为元框架支持 IE8 及以上浏览器。2. 架构模式Mediator Publish/Subscribe 模式实现跨模块通信。骨架中 mediator.coffee 只有三行Chaplin require chaplin mediator module.exports Chaplin.mediator即直接复用 Chaplin 内置的全局 mediator 作为消息总线。控制器Controller管理独立 UI 视图Rails 风格路由将 URL 映射到控制器动作应用视图Application View作为 dispatcher 与视图管理器。3. 类库增强扩展的 model、view、collection 基类减少重复代码并强制约定严格的**内存管理与对象释放disposal**机制带额外操作方法、可发出更精细 change 事件的 collection便于智能渲染列表的 collection view。4. 生产可用的补充身份认证方面README 指向 chaplin-auth 等抽象库该库位于外部仓库本文不展开。启动链路从 initialize 到 Home 页面结合源码我们可以完整还原 BWC 的应用启动流程这也是理解该骨架的最佳路径。入口initialize.coffeeApplication require application routes require routes # Initialize the application on DOM ready event. $ - new Application { title: Brunch example application, controllerSuffix: -controller, routes }页面 DOM ready 后创建Application实例传入应用标题、控制器后缀-controller用于根据路由名定位控制器文件以及路由表。应用对象application.coffeeChaplin require chaplin module.exports class Application extends Chaplin.Application # start: - # # You can fetch some data here and start app # # (by calling super) after that. # super应用类继承自Chaplin.Application注释给出了扩展点如需在启动前拉取数据可在重写的start方法中先取数再调用super。路由routes.coffee# Application routes. module.exports (match) - match , home#index路由表暴露一个接收match回调的函数空路径即根 URL映射到home#index即home-controller的index动作。控制器controllers/home-controller.coffeeController require controllers/base/controller HeaderView require views/home/header-view HomePageView require views/home/home-page-view module.exports class HomeController extends Controller beforeAction: - super reuse header, HeaderView, region: header index: - view new HomePageView region: mainbeforeAction在动作执行前运行通过reuse复用名为header的视图HeaderView挂载到header区域index动作创建HomePageView并指定其区域为main。控制器基类与视图复用controllers/base/controller.coffeeChaplin require chaplin SiteView require views/site-view module.exports class Controller extends Chaplin.Controller beforeAction: - reuse site, SiteView所有控制器继承此基类beforeAction中先复用顶级视图SiteView页面骨架子类再追加自己的复用视图。注释说明了reuse的语义视图在控制器之间持久复用避免切换页面时重复创建/销毁公共 UI如页头、导航。顶级视图与区域views/site-view.coffeeView require views/base/view # Site view is a top-level view which is bound to body. module.exports class SiteView extends View container: body id: site-container regions: header: #header-container main: #page-container template: require ./templates/siteSiteView绑定到bodyDOM id 为site-container并声明两个区域regionheader对应#header-container、main对应#page-container。这解释了为什么 HomeController 中region: header/region: main的视图会被正确放置——区域的 DOM 映射关系由顶级视图统一定义。视图基类views/base/view.coffeeChaplin require chaplin require lib/view-helper # Just load the view helpers, no return value module.exports class View extends Chaplin.View # Auto-save template option passed to any view as template. optionNames: Chaplin.View::optionNames.concat [template] getTemplateFunction: - template加载 lib/view-helper.coffeeHandlebars 助手注册见下把template加入optionNames使构造时传入的模板自动保存为template覆写getTemplateFunction直接返回预编译模板函数。Handlebars 助手lib/view-helper.coffeeregister with, (context, options) - ... register without, (context, options) - ... # Get Chaplin-declared named routes. {{url likes#show 105}} register url, (routeName, params...) - utils.reverse routeName, params骨架预置了三个模板助手{{#with}}/{{#without}}让with表现得像 Mustache 语义便于空值分支处理{{url routeName param}}通过 lib/utils.coffee 的reverse反解 Chaplin 命名路由在模板里直接生成链接。模型与集合基类骨架在 models/base/ 下提供model.coffee与collection.coffee分别继承 Chaplin 的Model与Collectionviews/base/ 下则提供view.coffee与collection-view.coffee。这一分层体现了 README 所述扩展基类、避免重复、强制约定的设计——业务代码只继承骨架基类即可自动获得 disposal、region 管理、collection 智能渲染等能力而不必直接接触 Chaplin 底层 API。生成器用 scaffolt 快速搭建模块BWC 内置了一整套基于 scaffoltnpm install -g scaffolt scaffolt view user # 生成 view scaffolt view user -r # -r 表示覆盖已存在文件 scaffolt controller header -p controllers/regions # 指定生成位置生成器覆盖了日常开发的全部工件collection、collection-view、controller、model、scaffold同时产出控制器与路由、style、template、view、view-template。每个生成器由generator.json配置与.hbs模板代码骨架组成例如 scaffold 生成器同时提供 controller.coffee.hbs 与 route.coffee.hbs一次命令即可打通控制器路由的完整链路。注意事项与适用场景测试环境README 明确说明当前分支不包含开箱即用的测试环境若想了解测试如何接入可参考with-testsgit 分支。版本要求骨架要求 Brunch 1.7仓库锁定的开发依赖为 Brunch 2.x 系列配套插件均为 2.x 版本。示例应用README 提到基于该骨架构建的示例应用 Ost.io外部项目本文不再展开。总而言之Brunch with Chaplin 是一个约定优于配置的现代化2012 年语境下前端骨架Brunch 负责构建与依赖打包Chaplin 负责 SPA 的路由、控制器、视图生命周期与内存管理二者通过 brunch-config.coffee 与 CommonJS 模块系统无缝衔接。若你希望基于 Backbone/Chaplin 体系快速启动一个结构清晰、可维护的 HTML5 应用本仓库的 packages/skeletons/brunch-with-chaplin 目录即是可直接研读、可复制、可二次开发的完整模板。赞分享构建工具前端【免费下载链接】brunch Web applications made easy. Since 2011.项目地址https://gitcode.com/gh_mirrors/br/brunch点击查看免费下载相关推荐使用 brunch-with-chaplin-js 骨架基于 Brunch 与 Chaplin 搭建 CommonJS 风格的 HTML5 单页应用使用 brunch with chaplin js 骨架基于 Brunch 与 Chaplin 搭建 CommonJS 风格的 HTML5 单页应用本文围绕构建工具前端Brunch 项目模板实战基于 React Redux ES6 的 with-redux 骨架全解析Brunch 项目模板实战基于 React Redux ES6 的 with redux 骨架全解析本篇文章以 Brunch 官方维护的 with构建工具前端Brunch with-es6 骨架实战指南用 Babel/ES6 快速搭建现代 JavaScript 应用Brunch with es6 骨架实战指南用 Babel/ES6 快速搭建现代 JavaScript 应用本文以 Brunch 官方现代 JavaScri构建工具前端上一篇easy-vibe 代码质量与重构指南从代码异味识别到安全重构、代码评审与质量度量下一篇Apple Silicon用户必读在M系列芯片上高效运行humanizer-1B-OptiQ-4bit的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Brunch with Chaplin 骨架项目实战指南：基于 Brunch 与 Chaplin 的 HTML5 应用脚手架

相关推荐

用 Range 头拆分大响应：基于 http-api-design 的 HTTP API 分页与部分内容设计指南

VCR 请求匹配进阶：用 uri_without_param 忽略非确定性查询参数

Claude Code 上下文压缩（Compaction）机制解密：recent-messages 分析指令与 `＜analysis＞`/`＜summary＞` 摘要流程

更多资讯

第088篇协程入门：suspend 到底挂起了谁

机房里通电正跑大模型的芯片，亚马逊转头打包卖了八十亿美元

动用七百多亿参数却只让百分之四干活，欧洲这只蜂鸟专治不懂装懂

以前总觉得「灯够亮」，直到孩子揉眼睛的频率越来越高

上班族备考公务员，每天只有两小时，到底够不够

GEMM 与 BLAS 全解：Tensor Core、CUDA、Transformer 的关系，各家 GPU 与框架的实现逻辑，以及投资机会

今日更新

Multisim仿真NE555 PWM控制器：从搭电路到调占空比全流程

S32K312 AUTOSAR BSW开发实战：从配置踩坑到烧录交付

双目视觉三维人脸重建：从视差图到点云粗配准全流程解析

本周精选

CMOS设计三大物理效应：体效应、沟道长度调制与亚阈值导电

微信小程序在线阅读毕设全解析：Java后端+MySQL+避坑实战

Android音频问题五层分析法：从App到Codec的系统化诊断

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？