如何为 Web 应用程序构建 maven 构建，包括构建 UI 和服务器答案

【问题标题】：How to construct maven build for web application, including building of UI and server如何为 Web 应用程序构建 maven 构建，包括构建 UI 和服务器
【发布时间】：2016-11-16 01:00:32
【问题描述】：

这是我们项目的文件夹结构：

src
|
|-frontend
|     |-...
|     |-dist
|
|-java-...
|
|-webapp-...

我有以下 npm 脚本：

"copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist"
"dist": "npm run copy & webpack --env=dist"

在Jenkins构建中，我希望maven先构建前端，调用npm dist脚本，然后将dist文件夹的内容复制到webapp文件夹，最后构建java程序

【问题讨论】：

标签： java maven jenkins build webpack

【解决方案1】：

我这样做的方式是将前端和后端分开在一个 Maven 项目中的两个不同的 Maven 模块中，考虑到它们实际上是两个不同的工件。您的模块是这样排序的，以便首先构建前端。

<?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>

    <groupId>demo</groupId>
    <artifactId>so-multi-modules</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>pom</packaging>

    <name>so-multi-modules</name>
    <url>http://maven.apache.org</url>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
    <modules>
        <module>front-end</module>
        <module>back-end</module>
    </modules>
</project>

前端模块主要是一个 JavaScript 应用程序，你最喜欢的 JS 构建工具从 Maven 启动，就像这样（我使用 Grunt）：

<build>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-antrun-plugin</artifactId>
            <executions>
                <execution>
                    <id>grunt-deploy</id>
                    <phase>package</phase>
                    <goals>
                        <goal>run</goal>
                    </goals>
                    <configuration>
                        <tasks>
                            <exec executable="grunt.cmd">
                                <arg value="deploy" />
                                <arg value="--force" />
                            </exec>
                        </tasks>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

然后您的后端将使用 antrun 插件将前端复制到您需要的位置。

<build>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-antrun-plugin</artifactId>
            <executions>
                <execution>
                    <id>copy-front-end</id>
                    <phase>package</phase>
                    <goals>
                        <goal>run</goal>
                    </goals>
                    <configuration>
                        <tasks>
                            <copy file="../front-end/target/path/to/dist" tofile="${project.build.directory}/path/to/dist/dest" overwrite="true" />
                        </tasks>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

【讨论】：