Scaffolt 生成器实战：为 Brunch with Chaplin 骨架批量生成 MVC 代码

• 构建工具
• 前端

导读

本指南围绕 brunch-with-chaplin 骨架内置的生成器集合展开，说明如何借助 Scaffolt 一次性生成 Chaplin 架构下的 View、Controller、Model、Collection、模板与样式文件。读完本文，你将掌握生成器的安装与命令行用法、10 类生成器的输出映射与模板语法，并能在实际项目中复用这套代码脚手架快速搭建页面模块。

一、什么是「生成器（Generators）」

在brunch-with-chaplin骨架中，generators/目录存放的是一组面向Scaffolt的生成器。Scaffolt 是一个命令行代码生成工具：它为每个生成器维护一份清单（generator.json）和若干 Handlebars 模板（.hbs），执行命令时按清单把模板渲染到目标位置，从而把「手写样板代码」变成「一条命令」。

这些生成器并非 Brunch 本身的功能，而是骨架为开发效率附加的工具层。骨架 README 强调该骨架「Requires Brunch 1.7+」，且采用 CommonJS 模块体系（而非 AMD），生成器产出的require 'views/base/view'一类路径正是遵循这一模块约定的结果。

二、安装与基本用法

原文档给出了安装命令与三个典型用法（见 generators/README.md）：

npm install -g scaffolt

scaffolt view user scaffolt view user -r scaffolt controller header -p controllers/regions

对这三个示例的逐条解读：

• scaffolt view user：以user为名称参数运行view生成器。依据 view 生成器清单，会在app/views/user-view.coffee生成一个UserView类；
• scaffolt view user -r：追加-r开关的调用形态，用于对生成结果做二次处理（其语义由 Scaffolt 命令行定义，此处保持原文档示例原样）；
• scaffolt controller header -p controllers/regions：通过-p参数指定自定义输出路径controllers/regions，用于把header控制器输出到指定目录，适合需要调整默认app/controllers/布局的场景。

三、生成器清单：10 类生成器与输出映射

generators/目录下共 10 个生成器，每个目录包含generator.json（输出清单）与若干.hbs模板文件，汇总如下：

清单文件统一采用如下 JSON 结构：files数组声明「从模板（from）到输出（to）」的映射，其中to支持{{name}}、{{pluralName}}等变量；scaffold还额外使用了method: "append"与dependencies两个字段（详见第五节）。

四、模板语法与命名约定

所有.hbs模板由 Scaffolt 渲染，核心变量与帮助函数如下：

• {{name}}：命令行传入的生成器名称，如scaffolt view user中的user；
• {{pluralName}}：名称的复数形式，用于 Collection 类与路由批量命名；
• {{#camelize}}...{{/camelize}}：Handlebars 帮助函数，把user这类命名转为驼峰User，用于拼接类名。

以view生成器为例，其模板 view.coffee.hbs 完整内容为：

View = require 'views/base/view' module.exports = class {{#camelize}}{{name}}{{/camelize}}View extends View template: require './templates/{{name}}'

执行scaffolt view user后，渲染结果即app/views/user-view.coffee：

View = require 'views/base/view' module.exports = class UserView extends View template: require './templates/user'

可以看到：类名自动驼峰为UserView，且模板声明template: require './templates/user'，与template生成器输出到app/views/templates/user.hbs的约定天然对应——这就是「view + template」两条命令协作的完整链路。

五、逐个生成器源码解析

5.1 model 与 collection

model.coffee.hbs 生成继承models/base/model的空 Model：

Model = require '/models/base/model' module.exports = class {{#camelize}}{{name}}{{/camelize}} extends Model

collection.coffee.hbs 则生成 Collection 并声明其model属性指向对应 Model（注意{{name}}与{{pluralName}}的配合）：

Collection = require 'models/base/collection' {{#camelize}}{{name}}{{/camelize}} = require './{{name}}' module.exports = class {{#camelize}}{{pluralName}}{{/camelize}} extends Collection model: {{#camelize}}{{name}}{{/camelize}}

5.2 controller 与 collection-view

controller.coffee.hbs 生成继承controllers/base/controller的控制器，类名采用{{pluralName}}的驼峰形式：

Controller = require 'controllers/base/controller' module.exports = class {{#camelize}}{{pluralName}}{{/camelize}}Controller extends Controller

collection-view.coffee.hbs 生成列表视图：继承views/base/collection-view，并把itemView指向对应的单条{{name}}View：

CollectionView = require 'views/base/collection-view' {{#camelize}}{{name}}{{/camelize}} = require 'views/{{name}}-view' module.exports = class {{#camelize}}{{pluralName}}{{/camelize}}View extends CollectionView itemView: {{#camelize}}{{name}}{{/camelize}}

5.3 template 与 style

• template生成器（generator.json）把名为empty的占位文件复制为app/views/templates/{{name}}.hbs，为后续手写模板预留空文件；
• style生成器（generator.json + style.styl.hbs）输出到app/views/styles/{{name}}.styl，模板内容为一行@import 'nib'，即自动引入 Nib 样式工具库。

5.4 scaffold：一键生成完整页面模块

scaffold是本套生成器中功能最强的组合式生成器。其 generator.json 做了三件事：

1. 生成控制器：渲染 controller.coffee.hbs，输出app/controllers/{{name}}-controller.coffee；
2. 追加路由：把 route.coffee.hbs 以method: "append"方式追加到app/routes.coffee（注意是追加而非覆盖）；
3. 声明依赖：dependencies数组（第 13-28 行）递归触发 9 个子生成，覆盖model、collection、两条记录的view/style/template（{{name}}-item与{{name}}-page），以及列表的collection-view/style/template（{{pluralName}}）。

生成的控制器自带两个 action（见 controller.coffee.hbs）：

Controller = require 'controllers/base/controller' {{#camelize}}{{name}}{{/camelize}} = require 'models/{{name}}' {{#camelize}}{{name}}{{/camelize}}PageView = require 'views/{{name}}-page-view' {{#camelize}}{{pluralName}}{{/camelize}}Collection = require 'models/{{pluralName}}-collection' {{#camelize}}{{pluralName}}{{/camelize}}CollectionView = require 'views/{{pluralName}}-collection-view' module.exports = class {{#camelize}}{{pluralName}}{{/camelize}}Controller extends Controller index: -> @collection = new {{#camelize}}{{pluralName}}{{/camelize}}Collection() @view = new {{#camelize}}{{pluralName}}{{/camelize}}CollectionView {@collection} @collection.fetch().then @view.render show: (params) -> @model = new {{#camelize}}{{name}}{{/camelize}} id: params.id @view = new {{#camelize}}{{name}}{{/camelize}}PageView {@model} @model.fetch().then @view.render

追加到路由文件的两行（route.coffee.hbs）：

match '{{pluralName}}', '{{pluralName}}#index', name: '{{pluralName}}' match '{{pluralName}}/:id', '{{pluralName}}#show', name: '{{name}}', constraints: {id: /^\d+$/}

可见 scaffold 直接产出一个「列表 + 详情」可用的完整 CRUD 雏形：index创建 Collection 并 fetch 后渲染列表视图，show根据params.id创建 Model 并渲染详情页，路由约束id: /^\d+$/保证了详情页参数为纯数字。

5.5 generator 与 view-template

• generator/目录（含generator.json、generated_file.coffee.hbs、generator.json.hbs）从文件结构看是一个「生成生成器」的自举模板：它把generator.json.hbs渲染为新的generator.json，把generated_file.coffee.hbs渲染为新的模板文件，适合团队按需定制自己的生成器；
• view-template/目录仅含 generator.json 一个清单文件，用于声明视图模板类生成器的输出映射。

六、生成器如何融入 Chaplin 骨架架构

生成器产出的代码之所以能直接运行，是因为它们全部继承自骨架内置的基类，路径约定与骨架 app/ 目录 一一对应：

• views/base/view、views/base/collection-view：位于app/views/base/，提供视图生命周期与内存管理（骨架特性中强调的「Strict memory management and object disposal」即由此承载）；
• controllers/base/controller：位于app/controllers/base/，封装控制器基础行为；
• models/base/model、models/base/collection：位于app/models/base/，扩展 Backbone 基础类以避免重复代码。

模板require './templates/{{name}}'之所以可用，依赖骨架的 Brunch 编译管线：app/views/templates/*.hbs会被预编译为 CommonJS 模块。这与骨架 README 中「CoffeeScript + Stylus + Handlebars 作为应用语言」「CommonJS 替代 AMD」的特性描述一致。

值得一提的是，仓库中 twitter 示例的 generators 目录是这套模式的扩展版：在同类生成器基础上增加了collection_test、controller_test、model_test、view_test等测试生成器，并沿用generator.json+.hbs的同一套机制，可作为自定义生成器的对照参考。

七、使用建议与注意事项

1. 先装 Scaffolt 再使用：生成器命令依赖全局安装的scaffolt，安装后可直接在骨架项目根目录执行；
2. 命名即约定：{{name}}决定类名（驼峰）、文件名与模板路径，建议命名使用单数小写形式（如user），复数形式{{pluralName}}由 Scaffolt 推断生成，用于 Collection 与路由；
3. scaffold 会追加路由：其method: "append"行为会持续向app/routes.coffee追加match行，多次执行同一 scaffold 会重复追加，需自行留意去重；
4. 生成器可扩展：参考 generator 自举生成器的结构，可以复制一套generator.json+.hbs为团队定制新的代码模板；输出的目标路径通过files[].to灵活控制，配合-p参数即可调整目录布局；
5. 本套生成器面向 CoffeeScript 骨架：模板输出均为.coffee、.styl、.hbs；若使用仓库内的 brunch-with-chaplin-js 骨架，则需要对应调整模板语言。

• 构建工具
• 前端