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