java - 如何为Web应用程序构建maven构建，包括UI和服务器的构建

Question

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

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程序

Answer 1

我的做法是将前端和后端分离到 Maven 项目中的两个不同的 Maven 模块中，考虑到它们实际上是两个不同的 Artifact 。您的模块是这样排序的，首先构建前端。

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