RequireJS 发布实战

近期公司的项目都开始用H5来做,然后通过Server App的方式嵌入到手机中。

在H5 App端的技术选型中,起初偏向于使用Backbone + Ratchet。但由于Nested Model的问题,在BB上纠结了很久,后来尝试用了下AngularJS,被这种强大所吸引。

于是项目的流程如下:

  • node.js + NPM 包负责处理一些开发中的事物,像grunt.js 的静态文件生成。
  • bower 用来配置App的依赖包
  • RequireJS 用来做前端的模块化和异步加载器
  • AngularJS 是MVVM 框架
  • GruntJS 配置开发环境启动 & 线上环境的生成脚本

在线上环境发布时,遇到了一些问题:

开发中的项目结构如下:

1
2
3
4
5
6
7
8
9
10
11
.
├── app
│   ├── index.html
│   ├── scripts
│   ├── styles
│   └── views
├── bower_components
│   ├── angular
│   ├── ratchet
│   └── requirejs
└── node_modules

我们希望上线时的样式如下,bower_components中有用的内容都被放入vendor目录下(这种都是第三方完整框架的源文件,不用合并,方便共享,含JS、CSS)。

同时,自己项目中的一些小的JS文件,希望统一合并、压缩,放置到 scripts 下(因为项目比较小,文件多,但都很小,希望进行统一合并,大型项目,可以按Feature进行)

index.html main.js中也要对依赖文件进行修改。

1
2
3
4
5
6
7
8
├── dist
│   ├── scripts
│   ├── styles
│   ├── views
│   ├── vendor
│   │ ├── angular
│   │ └── catchet
│   └── index.html

后来实践下来,通过grunt-contrib-requirejs,可以在gruntjs 中对 RequireJS 进行优化。更多关于R.js的配置见:

如果项目够小,可以使用将所有文件进行合并,并通过alameda 进行模块调用。

感觉在YO的组合下,这种模式应该是标准了,但奇怪的是,并没有这样的脚本,而自己实现下来,成本很高。像有用的bower文件检测,自己的scripts文件合并。毕竟不是专职,不然可以花精力写一套这样的Glup/Grunt脚本。

REF::