Hem 项目技术文档

1. 安装指南

Hem 是一个用于在构建 JavaScript Web 应用程序时编译 CommonJS 模块的项目。你可以将 Hem 视为 Node 的 Bundler，或者是增强版的 Stitch。它主要设计用于开发基于 Spine.js 的单页 Web 应用程序（SPA）。

安装方式

你可以通过以下几种方式安装 Hem：

1. 使用 npm 全局安装：

   npm install -g hem
   

2. 从 GitHub 安装：

   npm install -g git://github.com/spine/hem.git
   

3. 克隆仓库并本地链接：

   git clone https://github.com/spine/hem.git
   cd hem
   npm link
   

最后一种方式非常适合如果你想自定义 Hem 或开发 npm 包。

2. 项目的使用说明

依赖解析

Hem 有两种依赖解析方式：Node 模块和 Stitch 模块。

• Node 模块：Hem 会递归解析代码中引用的外部 Node 模块。这意味着 Spine、jQuery 等都可以作为外部 Node 模块，而不需要在应用程序中保留大量库文件。
• Stitch 模块：Hem 会将整个应用程序打包（不进行静态依赖分析），并自动转换 CoffeeScript 和 jQuery 模板文件。

CommonJS 模块

CommonJS 模块是 Hem 的核心，Hem 要求每个模块都遵循 CommonJS 格式。CommonJS 模块提供了依赖管理、作用域隔离和命名空间，适用于任何超过几个文件的 JavaScript 应用程序。

示例 CommonJS

在 app/controllers/users.coffee 文件中：

class Users extends Spine.Controller

# 显式导出 Users 对象
module.exports = Users

样式编译

Hem 还会将应用程序的所有 CSS 打包成一个文件，使用 Stylus 库进行编译。Stylus 是 CSS 的超集，提供了更多的语法糖，如可选的大括号和冒号、混合、变量和显著的空白。

3. 项目 API 使用文档

配置文件

Hem 使用 slug.coffee 文件进行配置，位于应用程序的根目录。配置文件允许你动态构建最终的配置对象。

示例配置：

config =
    hem:
        baseAppRoute: "/"
        tests:
            runner: "browser"
    application:
        defaults: "spine"
        css:
            src: 'css'
        js:
            src: 'app'
            libs: [
                'lib/jquery.js',
                'lib/jade_runtime.js'
            ]
            modules: [
                "spine",
                "spine/lib/ajax",
                "spine/lib/route",
                "spine/lib/manager",
                "spine/lib/local"
            ]
        test:
            after: "require('lib/setup')"

module.exports.config = config

目录结构

典型的 Spine 应用程序目录结构如下：

├── app
│   ├── controllers
│   ├── index.coffee
│   ├── lib
│   ├── models
│   └── views
├── css
│   ├── index.styl
│   └── mixin.styl
├── lib
│   ├── jade_runtime.js
│   └── jquery.js
├── node_modules
│   ├── jade
│   ├── spine
│   ├── stylus
├── package.json
├── public
│   ├── application.css
│   ├── application.js
│   ├── favicon.ico
│   └── index.html
├── slug.coffee
└── test
    ├── public
    └── specs

4. 项目安装方式

Hem 的安装方式已经在“安装指南”部分详细说明。你可以通过 npm 全局安装，或者从 GitHub 安装，甚至可以克隆仓库并本地链接以进行自定义开发。