JavaEE Web应用的js css images html等如何模块化

一个公司通常有一套通用的开发框，包括后台的java代码和前端的js/css/image/等等，java代码是很好办的，用maven管理，划分出相应的模块，比如

core.jar, common.jar等等，上传到公司的maven库，然后其它项目去依赖就好了。

但是对于webapp下面的东西怎么办呢，比如我们有通用的js/css，还有一些通用的功能，那么就还有jsp，这些如果分发给各个项目组呢？

在网上了解了下，发现有几种现成工具：

1. twitter推出的bower，是一款前端包管理工具，依赖node.js， 我感觉和WebJars很像，一会介绍一下webJars。它主要是帮你管理像jquery, bootstrap这些包，有点像maven去管理你的spring/hibernate这些依赖包一样，更多介绍可参考 http://www.aspku.com/kaifa/javascript/129356.html

2. WebJars : http://www.webjars.org/

我觉得WebJars和bower的思路是一样的，它提供maven/ivy/gradle等多种依赖方式，都是提供标准的第三方包，让你管理这些js更方面，升级更简单。

对于bower和WebJars都可以帮助我们更好的管理js/css的依赖，不用自己去找bootstrap下载然后拷贝到自己的项目里面来，然后又分发给不同的项目组，不用等bootstrap新版本出来后又要去下载更新版本，这大大简化了js框架的管理。

WebJars使用一例：

常用的js等可以以jar包形式加载

<dependencies>

<dependency>

<groupId>org.webjars</groupId>

<artifactId>bootstrap</artifactId>

<version>2.3.0</version>

</dependency>

</dependencies>

然后你的中间件、web框架以静态资源的形式读取

比如我用springmvc，只需配置如下

<mvc:resources mapping="/webjars/**" location="classpath:/META-INF/resources/webjars/"/>

在页面引入

<spring:url value="/webjars/bootstrap/2.3.0/css/bootstrap.min.css" var="bootstrapCss"/>

3. maven 的war插件的overlays

我觉得上面两种工具都只是解决js/css等问题，对于公共的jsp怎么办的，其实我是希望搞一个war工程，里面有公共的js/css/jsp，然后其它项目组创建自己的war工程，然后依赖这个公共的war工程就好了，这个问题用overlays就可以很好的解决，具体怎么使用可以看  http://kyfxbl.iteye.com/blog/1678121

摘录一部分在下面

2个web工程，一个是task-sla-web，一个是task-web-dist，packaging类型都是war，目录结构如下：

下面是task-sla-web的pom文件：

Xml代码  

1. <modelVersion>4.0.0</modelVersion>
2. <groupId>com.huawei.inoc.wfm.task</groupId>
3. <artifactId>task-sla-web</artifactId>
4. <packaging>war</packaging>
5. <version>0.0.1-SNAPSHOT</version>
6. <name>task-sla-web</name>

该工程就是打成一个war包，但是这个war是无法运行的，而是稍后用来合并的。（其中放了 一个空的web.xml，因为maven-war-plugin的package goal有强制要求）

下面是task-web-dist的pom文件：

Xml代码  

1. <modelVersion>4.0.0</modelVersion>
2. <groupId>com.huawei.inoc.wfm.task</groupId>
3. <artifactId>task-web-dist</artifactId>
4. <packaging>war</packaging>
5. <version>0.0.1-SNAPSHOT</version>
6. <name>task-web-dist</name>

Xml代码  

1. <!-- 合并多个war -->
2. <plugin>
3. <groupId>org.apache.maven.plugins</groupId>
4. <artifactId>maven-war-plugin</artifactId>
5. <version>2.1.1</version>
6. <configuration>
7. <overlays>
8. <overlay>
9. <groupId>com.huawei.inoc.wfm.task</groupId>
10. <artifactId>task-sla-web</artifactId>
11. </overlay>
12. </overlays>
13. </configuration>
14. </plugin>

Xml代码  

1. <!-- 配置依赖 -->
2. <dependencies>
3. <dependency>
4. <groupId>com.huawei.inoc.wfm.task</groupId>
5. <artifactId>task-sla-web</artifactId>
6. <version>0.0.1-SNAPSHOT</version>
7. <type>war</type>
8. </dependency>
9. </dependencies>

以上片段主要要注意几点：

1、task-web-dist自身的packaging类型也是war

2、在<overlay>中配置要归并的webapp的groupId和artifactId，注意的是，该pom所在的webapp工程是主工程，会覆盖掉所有待归并工程的同名文件，包括web.xml

3、要归并的webapp，必须声明为依赖

归并后的最终war包如下：

其中的文件和.class都是由2个war包归并得到的，task-web-dist是主war包，如果多个war包中存在重名文件，则会被task-web-dist的文件覆盖，比如web.xml