量身打造angular开发解决方案

不知不觉，我们团队实践AngularJS已经一年多了， 老实说，AngularJS很多坑，我们希望能总结出来，对后来人能有所帮助。

最近在反复拜读 @fouber 的 「前端工程系列文章」， 发现神器FIS，于是希望能借此机会，量身打造一款Angular前端工具。

本文假设读者是有前端开发经验的工程师，并对angular有一定的实践经验，且阅读过「前端工程系列文章」。

目录：

• 需求调研&&整理 - 我们需要怎么样的一款工具？
• 开发规范和部署规范
• 模块化框架
• 辅助命令
• 总结

Day1: 2014年11月11日 - 手仍在

首先是需求调研，根据团队的实践和社区的调研，它应该具备：

1. 模块化开发。最好能像写nodejs一样写js，很舒服。
2. 性能要好。模块那么多，得能按需加载，请求不能多。还要能支持ngRoute和ui-router。
3. 组件化开发，官方不是提倡organize by feature么？就这么整吧！一个组件的js、css、模板最好都在一个目录维护，维护起来方便。
4. 也许哪天我就不爱你了呢？ 所以不能对angular进行太耦合的hack，要原汁原味。
5. CoffeeScript,Sass之类的有意思，也给我来一个。
6. 图片base64嵌入。有些小图可能要以base64的形式嵌入到页面、js或者css中使用。嵌入之前记得压缩图片以减小体积。
7. js/css/图片压缩应该都没问题吧。
8. 测试不能停，要能与ci平台集成， 支持karma和protractor。
9. 开发体验要好。文件监听，浏览器自动刷新(livereload)一个都不能少。
10. 我们用nodejs作为服务器，本地要能预览，最好再能抓取线上数据，方便调试。
11. 业界那么多优秀类库， 当然要支持bower组件仓库的安装啦。
12. yeoman用过吧？ 对， 脚手架功能也不能少了。
13. 依赖注入声明的写法太烦了，参考下ng-annotate吧。
14. 顺便再提供个打包功能吧

回头看看这个列表，我怎么有点腿发软了。。。

---

好吧，在瓶神的鼓励下， 我们试试看吧，先把上面的需求整理下：

• 规范

  • 开发规范
    • 模块化开发，js模块化，css模块化，像nodejs一样编码
    • 组件化开发，js、css、tpl维护在一起，organize by feature
    • 按需加载，支持ngRoute和ui-router
    • 尽量原生化的编写Angular
  • 部署规范
    • 采用nodejs后端，基本部署规范应该参考express项目部署
    • 按版本号做非覆盖式发布
    • 公共模块可发布给第三方共享

• 框架

  • js模块化框架，支持请求合并，按需加载等性能优化点

• 工具

  • 支持ng-annotate自动生成angular的依赖注入声明。
  • 可以CoffeeScript,Sass的编译
  • 支持js、css、图片压缩
  • 允许图片压缩后以base64编码形式嵌入到css、js或html中
  • 与ci平台集成， 支持karma单元测试, protractor端到端测试。
  • 文件监听、浏览器自动刷新
  • 本地预览、数据模拟
  • 提供类似yo的脚手架, 生成项目框架，包括Controller等
  • 提供打包功能

• 仓库

  • 支持bower模块安装和使用

Day2

0.开发概念定义

仿scrat的概念：

1. 模块化资源：js模块、css模块或组件
2. 页面资源：网站html或后端模板页面，引用模块化框架，加载模块
3. 非模块化资源：并不是所有的开发资源都是模块化的，比如提供模块化框架的js本身就不能是一个模块化的js文件。严格上讲，页面也属于一种非模块化的静态资源。

我们的文件后缀名约定如下：

1. 脚本文件： *.js , *.coffie
2. 样式文件： *.css, *.sass
3. 模板文件： *.tpl.html
4. 测试脚本: *.spec.js
5. 内嵌内容: *.inline.* -- 有些文件希望分开编写，但发布的时候自动合并。
6. 调试代码： *.inject.js -- 在开发期自动插入到页面, 提供一些API的mock。（针对HybridApp）

---

接下来是重要的:

解耦开发规范和部署规范是前端开发体系的设计重点。

1.开发目录设计

project
  - component_modules         **存放外部模块资源**
    - angular                   - 具体的生态模块
    - angular-touch
    - ...
  - components                **存放项目模块资源**
    - app                       - angular主入口
      - app.js
    - shared                    - 内部公共模块 (不能发布到生态模块)
      - AA
        - AA.js
        - AA.tpl.html
      - BB
      - ...
    - modules                   - 业务模块目录
      - A                         - 具体的业务模块
        - A.js                       - 该模块入口
        - A.css                      - 该模块样式
        - A.png                      - 图片文件
        - A.tpl.html                 - 该模块模板文件
        - A.spec.js                  - 该模块的单元测试
        - A-helper.inline.js         - 该脚本会被内嵌到A.js
      - B
      - ...
  - views                     **存放页面以及非模块化资源**
    - index.html                - HTML文件
    - lib                       - 存放其他非模块化类库
      - scrat                   - 使用scrat.js作为模块化加载类库
      - ...
  - package.json              自述文件
  - bower.json                Bower的配置文件
  - karma.conf.js             单元测试的配置文件
  - fis-conf.js               FIS的配置文件

2.部署目录设计

• 按版本部署，采用非覆盖式发布
• 以下文件不会发布：
  • *.tpl.html (会被转换为js文件，后文描述)
  • *.inline.* (会被内嵌到其他文件)
  • *.spec.js (仅在自动化测试时发布)
  • *.inject.js (仅在本地调试时嵌入)
  • 其他配置文件

目录结构如下：

release
  - public
    - c                   **模块化资源都部署到这个目录下**
      - 公共模块
        - 版本号
      - 项目名
        - 版本号
    - 项目名
      - 版本号             **非模块化资源都部署到这个目录下**

3. 设计工具，完成开发目录和部署目录的转换