使用maven结合requirejs管理前端脚本

已有的web项目，一直使用Maven作工程管理，现阶段前端调整为使用requirejs来负责模块加载依赖，同时使用jasmine来完成前端的UT。

便与在maven下统一管理，简单整理了下合在一块儿的使用，Maven,require,jasmine三者技术细节自去google

1、使用requirejs作模块依赖管理。

叙述下前提摘要

一、为何使用requirejs

项目愈来愈大，前端愈来愈重要，代码愈来愈多，缺少有效的管理。因而关注到业内的AMD规范。

AMD规范全称是Asynchronous Module Definition，即异步模块加载机制，完整描述了模块的定义，依赖关系，引用关系以及加载机制，requirejs是该规范的一个比较好的实现，因而……采用

二、如何使用requirejs

define,require等语法没必要多说，参考API文档http://www.requirejs.cn/

 

这里其实还得说回前端代码的结构划分，依据咱们已有的工程代码，简单整理了以下结构，但愿对你们有用。

 

 

前端按照后端领域模型开发的方式，同时有针对性的提出UI库，模板库划分

Lib	依赖库
Basic	基础，设计命名空间、版本定义、BaseType定义等。
Model	模型对象，相似后台的bean
onepiecework	业务逻辑库，能够存放统一复杂业务逻辑在前端的调用，处理代码。
UI	前端UI库 业务逻辑的服务你们都比较认同，可是关于UI，你们总以为太low，或者有细节差别等等。可是，建议千万不要处处复制粘贴，若是类似，抽取公共部分，这个位置就是专为此准备的）
view	最终与html打交道的js脚本，control层
Commonjs	requireConfig文件，提供全局加载路径、lib库等的管理

 

测试目录对照开发目录，清晰（喜欢maven这一点

2、使用maven来处理对requirejs工程的混淆和编译打包

【注】exec插件的调用命令mvn exec:exec

代码压缩混淆会影响到UT,建议在最终打包时调用，当前工程定义混淆专属的profile，须要在测试执行时-P指定，完整命令为 mvn exec:exec -PjsCompile

 

一、r.js，熟悉requirejs的大伙对此确定不生疏。

使用思路很简单，在maven中配置exec-maven-plugin 插件来调用本地编写好的bat命名，命令很简单，核心就一句。能够参考build目录下的build.bat

node r.js -o buildConfig.js

 

buildConfig.js, 压缩混淆配置，制定对js代码进行压缩，合并的规则。

细节API依旧不说，参考这http://www.yfznw.com/node/22

 

完了？没完

二、上面的东东你们学习下也就都会了，问题是如何最终发布。压缩合并咱们最终考虑的是前端性能，那么在前段展现时须要考虑另一个就是依赖库的加载性能。

规则：

• 必定得作合并，工程为了清晰咱们代码很分散，不合并前端得加载20+js
• lib库千万不要合并到本身的业务库中
• 重复的库提取重复部分

 

这个和上面的工程分割有关联，你们看的过程当中能够翻回去看看

对比下多种方案

1. 针对最终的每一个view,提供除了lib库依赖的独立js

页面相互独立，比较少有公共逻辑，那就这么干

1. 若是是对外提供的相似SDK库，那就把全部的js文件压缩成为一个，相似jquery.js

前端SDK开发者，很少说什么，吧大家须要总体对外提供的东东打一个包

1. 若是是上面二者的过渡体（常态）

• 建议按照硬结构，先提取Basic和Util模块，合并
• 软结构（业务功能），相关联业务模块合并压缩到一块儿。
• UI库最好独立打成一个lib，太大的话按照UIKu类型分割，相似bootstrap的插件划分哪一种方式

其余东东很差说，业务太复杂，不能妄论。

 

三、针对上面3）,如何提供本身的subLib库，不被合并到最终的view.js中，又能将分散的多文件合并到一块儿呢。

 

module中，定义本身的模块，而后再view中排除掉

完了，真的完了

3、jasmine的UT测试

这里按照官方的示例简单搭建了下，给个连接

http://searls.github.io/jasmine-maven-plugin/amd-support.html

示例代码git工程

https://github.com/searls/jasmine-maven-plugin/tree/master/src/test/resources/examples/jasmine-webapp-amd-support

 

上述示例工程源码提交到了oschina上( http://git.oschina.net/hansj/maven-require)