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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值