maven 和 r.js 的整合

看到这个话题,可能有人会觉得不解,为什么会有这样的场景,为什么 js app 需要和 java 项目整合到一起,其实就是为了让开发效率更高,更加集中关注应用的实现过程,而不用纠结 host 绑定、如何测试、如何发布。

Maven 除了可以做项目的 build (通常是服务端项目),还可以做一些额外的事情,这些事情就是帮我们 build js app,这里的 build 通常就是指把一些开发过程产出的源代码变成线上代码的过程,如果没有在使用 AMD api 来构建应用,通常仅仅需要简单的文件压缩合并,这里我们会介绍怎么在 maven 项目中使用 r.js 来 build 基于 AMD api 实现的应用,这里也推荐一下比较复杂的应用使用尽量转到 AMD 来实现,参考 Why AMD,然后推荐 r.js 是因为这个算是目前做得最好的 build 工具。

首先需要安装 node.js , 本地的话最好再装 r.js , 这样就不用每次都输入 node r.js。

然后把整个 js 工程目录(其实 css 也类似,如果 js 和 css 结构上毗邻的话完全可以全部放进来)放到 maven 项目的 src/main/webapp ,这样的目的是,通过相对地址即可访问 js,同时可以使用 maven 进行 build。

关于 r.js 如何 build 请直接看 github 上的介绍,非常详细,唯一一点需要注意的是,如果你想一次编译多个  js 文件(一般指整个应用的脚本集合)的话,它会把整个 js 的目录复制到 build output 目录,比较烦,当然你也可以选择单个 js 单独 build,这样它只会 build 单个文件。

做到这一步的话就已经可以使用人肉来 build js app 了。

node path/to/r.js main.js

 

接下来需要告诉 maven 编译项目的时候需要多 build js。
做法就是在 build 的时候自动执行 “r.js -参数”,所以我们需要一个可以编译的时候执行命令的 plugin:Exec Maven Plugin.

在 pom.xml 中添加 plugin 的配置:

                
            
                org.codehaus.mojo
                exec-maven-plugin
                1.1
                
                    
                        compile
                        
                            java
                        
                    
                
                
                    org.mozilla.javascript.tools.shell.Main
                    
                        path_to_r.js
                        -o
                        path_to_app.js
                    
                
            

其中的参数就是我们人肉 build 时输入的命令,很好理解。

同时 pom.xml 还需要添加一个 dependency:


        
            rhino
            js
            1.7R2
        

至此配置就已经 ok,在项目目录执行 mvn,即可看到编译的效果,如果报错直接在 console 里看信息对症解决即可。

Published by

Z.J.T

Product Designer from Wandou Labs

  • http://twilight.btlogs.com 铺路微光

    “不用纠结 host 绑定、如何测试、如何发布”
    这段何解?
    我看了一下,这种方法能使得js依赖包的合并压缩在服务端打包的时候一起做掉,但引号里的这些问题如何通过这种方法就改善了呢?
    我的理解是,因为前端代码和服务端代码在一个分支里,所以也可以方便地部署到一个服务器上,前端只管开发源代码,用分散的源代码来调试,后端 build 服务包的时候就自动把前端代码也 build 好了,所以不用换 hosts 绑定,始终用自己服务器。是这样吗?

    • http://orzpoint.com Z.J.T

      不用host 就是静态文件用相对路径访问,跟你说的差不多,不同的是 style 和 项目是不同分支,我们使用 git ,所以把 style 作为N个特定项目的子模块,这样很方便,不用单独为了一个项目做同样的事情,style 可以到处使用,发布的话其实也就是针对这两个分支进行

  • http://www.q98.com.cn/ 增肥方法

    很不错,学习下了