在前端开发过程中，使用框架或工具可以提高开发效率，常常需要用到一些现成的骨架（skeletons）。Brunch 是一个快速而简单的前端构建工具，它提供了许多骨架供开发者使用。其中 brunch-skeletons 包是一个包含多个骨架的 npm 包，本文将详细介绍如何使用它。
安装 brunch-skeletons
在命令行中执行以下命令安装 brunch-skeletons：
- --- ------- -- ----------------
查看 brunch-skeletons 所有骨架
执行以下命令可以查看 brunch-skeletons 包含的所有骨架：
- ---------------- ----
我们可以看到 Brunch-skeletons 包含以下骨架：
- backbone - 使用 Backbone.js 构建的 Web 应用程序的 Brunch 骨架
- ember - Ember.js 的默认骨架
- react - 使用 React 的 Brunch 骨架
- angular-requirejs - 使用 AngularJS 和 RequireJS 的 Brunch 骨架
- angular - 使用 AngularJS 的 Brunch 空骨架
使用 brunch-skeletons 创建项目
执行以下命令可以用 brunch-skeletons 创建新项目：
- ---------------- --- ----- -- -----
上述命令将新建一个名为 myapp 的项目，并使用 ember 骨架。
使用示例
以使用 Angular.js 和 Require.js 的 brunch 骨架为例：
在命令行中执行以下命令新建项目：
- ------ --- ----- -- -----------------
上述命令将新建一个名为 myapp 的项目，并使用 angular-requirejs 骨架。
进入 myapp 文件夹，可以看到 brunch 自动生成了如下项目结构：
--- ---
- --- ----------
- --- -------
- - --- -------------
- - --- -------------
- --- ----------
- --- -----------------
- --- ------
- - --- ------------
- --- ------
- - --- --------
- - --- ----
- - --- ------------
- - --- -----------
- - --- ---------------
- --- -----
- --- -------
- - --- -----------
- --- -----
- --- -----------------
- --- -----------
- --- -----------
--- ----------
--- -------------
--- ------------
- --- --------------
--- ------------
--- ------
--- ------
--- ----------
--- -----------
- --- ----
- - --- ----------
- - --- ----------
- - --- -----------------
- --- -------
- --- -----------------
- --- ------------
--- -----------
--- -------
--- ----
--- -------------
--- ----------------其中 app/ 文件夹包含了 Web 应用程序的程序代码，public/ 文件夹则包含了压缩后的脚本、CSS 和图片。
例如，我们可以在 app/models/todos.coffee 中定义一个 Todo 模型：
----- ------------ ------- --------------
---------
----- -----完成之后，在 app/views/todos/list.coffee 中使用 Todo 模型：
----- --------------------- ------- -------------
-------- ----
----------- --
----------------------- -------- -----
------------------------- -------- -----
----------------------- -------- -----
------- ------ --
---- - --- --------------------------------- ------
-----------------------------
------- --
-------------
-------------------------
------- --
-----------
-最后，在 app/views/app.coffee 中将以上代码使用页面加载：
----- --------------- ------- -------------
----------- --
----------- - --- -------------------------
---------------- - --- ---------------------------------- -------
------- --
----------------------
----------------------------------------------
-
--------- --
---
--------------
---- --------------------
---上述代码中，我们使用了 TodosCollection、 TodosListView 和 AppView，这些都是使用 brunch 新项目时自带的文件。
结论
在使用 brunch-skeletons 包创建 Web 应用程序时，我们可以选择最适合我们需求的骨架，并根据自己的需要进行定制。同时，Brunch 意在提供一种模块化和可扩展的开发方式，方便开发者在维护代码的同时，提高开发效率，让我们的生活更轻松。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/68735