WebJars的发布以及使用

http://www.webjars.org/ 查看详细的使用说明

WebJars是打包到JAR（Java Archive）文件中的客户端Web库（例如jQuery和Bootstrap）。

• 在基于JVM的Web应用程序中显式轻松地管理客户端依赖项
• 使用基于JVM的构建工具（例如Maven，Gradle，sbt，...）来下载客户端依赖项
• 传递依赖关系会自动解析，并可选择通过RequireJS加载

Web前端使用了越来越多的JS或CSS，如jQuery，Backbone.js和Bootstrap。一般情况下，我们是将这些Web资源拷贝到Java Web项目的webapp相应目录下进行管理。这种通过人工方式管理可能会产生版本误差，拷贝版本错误，漏拷等现象，导致前端页面无法正确展示，版本不一致，文件混乱等，导致出现一些莫名其妙的错误等。

WebJars是将web前端资源（js，css等）打成jar包文件，然后借助Maven工具，以jar包形式对web前端资源进行统一依赖管理，保证这些Web资源版本唯一性。WebJars的jar包部署在Maven中央仓库上。

webjar的使用

类似的使用方式：

<dependencies>
    <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>2.2.4</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>3.3.6</version>
        </dependency>
</dependencies>

SpringMVC配置引用

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

在Servlet3中可简化为：

<mvc:resources mapping="/webjars/**" location="/webjars/"/>

Java配置

@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {

  @Override
  public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
  }

}

在Servlet 3容器中，registry.addResourceHandler行可以简化为：

registry.addResourceHandler("/webjars/**").addResourceLocations("/webjars/");

使依赖版本不可知

使用Spring Framework 4.2或更高版本时，它将自动检测webjars-locator类路径上的库，并使用它自动为您解析任何WebJar资产的版本。要启用此功能，您需要将webjars-locator库添加为应用程序在pom.xml文件中的依赖项，如：

<dependencies>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>webjars-locator</artifactId>
        <version>0.30</version>
    </dependency>
</dependencies>

<link rel='stylesheet' href='/webjars/bootstrap/css/bootstrap.min.css'>

打包webjar

新建maven项目，在pom.xml中

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <parent>
        <groupId>org.sonatype.oss</groupId>
        <artifactId>oss-parent</artifactId>
        <version>7</version>
    </parent>

    <packaging>jar</packaging>
    <groupId>org.webjars</groupId>
    <artifactId>test</artifactId>
    <version>1.0.0-SNAPSHOT</version>
    <name>Test</name>
    <description>WebJar for Test</description>
    <url>http://webjars.org</url>

    <developers>
        <developer>
            <id>jamesward</id>
            <name>James Ward</name>
            <email>james@jamesward.com</email>
        </developer>
    </developers>

    <licenses>
        <license>
            <name>Apache 2.0</name>
            <url>https://github.com/facebook/react/blob/master/LICENSE</url>
            <distribution>repo</distribution>
        </license>
    </licenses>

    <scm>
        <url>http://github.com/webjars/react</url>
        <connection>scm:git:https://github.com/webjars/react.git</connection>
        <developerConnection>scm:git:https://github.com/webjars/react.git</developerConnection>
        <tag>HEAD</tag>
    </scm>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <!--输出路径-->
        <destinationDir>${project.build.outputDirectory}/META-INF/resources/webjars/${project.artifactId}/${project.version}</destinationDir>
        <requirejs>
            {
                "paths": {
                    "test": "test"
                }
            }
        </requirejs>
    </properties>

    <build>
        <plugins>

            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-release-plugin</artifactId>
                <version>2.5.3</version>
            </plugin>

            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-deploy-plugin</artifactId>
                <executions>
                    <execution>
                        <phase>deploy</phase>
                        <goals>
                            <goal>deploy-file</goal>
                        </goals>
                        <configuration>
                            <packaging>jar</packaging>
                            <generatePom>true</generatePom>
                            <url>${project.distributionManagement.repository.url}</url>
                            <artifactId>${project.artifactId}</artifactId>
                            <groupId>${project.groupId}</groupId>
                            <version>${project.version}</version>
                            <file>${project.build.directory}/${project.artifactId}-${project.version}.jar</file>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>

        <!-- 定义打包的资源 src/main/resources 目录下的所有 -->
        <resources>
            <resource>
                <directory>${project.basedir}/src/main/resources</directory>
                <targetPath>${destinationDir}</targetPath>
                <filtering>true</filtering>
            </resource>
        </resources>
    </build>

    <!-- 本地的maven私服 -->
    <distributionManagement>
        <repository>
            <id>release</id>
            <url>http://192.168.0.215:8081/repository/maven-releases/</url>
        </repository>

        <snapshotRepository>
            <id>snapshot</id>
            <url>http://192.168.0.215:8081/repository/maven-snapshots/</url>
        </snapshotRepository>
    </distributionManagement>

</project>

在maven的settings.xml中

    <servers>
        <server>
            <id>release</id>
            <username>admin</username>
            <password>admin123</password>
        </server> 
        <server>
            <id>snapshot</id>
            <username>admin</username>
            <password>admin123</password>
        </server>
    </servers>

注意 <id/> 值对应

运行命令：mvn clean package 打包jar；mvn deploy发布webjar到仓库。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="webjars/test/1.0.0-SNAPSHOT/copy.js"></script>
</head>
<body>
    <h1>欢迎</h1>
    <img src="webjars/test/1.0.0-SNAPSHOT/web-bg.jpg" height="400px" width="100%">
</body>
</html>