需求背景
因为前端（react脚手架）项目打包一直用的jekens第三方库用脚本执行命令行的方式去打包（减少对jekens第三方库的依赖），想着直接能不能用maven(java的打包工具)去打包前端代码。
准备工作
因为这些事情需要安装maven插件去完成，其中对maven的版本要求是3.6的版本或者更高版本，附上maven的安装包zip下载链接maven 下载(记得下载-bin.zip为后缀的文件)，下载以后解压好，存在任意盘。
文件目录结构
build 是react build后的产物 ;node是放node和npm等安装包的地方;node-modules是放npm 下载好的react需要的插件 ；src和public放的react源码 ；target是执行生成war包命令后自动生成的文件夹，为war包的存放位置；package.xml为文件夹编译成war包的设置文件；pom.xml为maven的相关配置文件；
实现步骤
1、首先在java项目根目录的pom.xml配上你的项目文件夹(比如：face-v)，配置好了以后你的前端文件夹就可以执行maven 的脚本了
我的前端相关代码叫文件夹为face-v
2、下载好了maven安装包后，需要配置好idea(java编辑器)里的maven设置，如图
idea设置maven 配置按钮
第一步,设置maven的安装目录，第二步，把maven的设置文件导入进去，setting文件的设置需要根据自己项目的实际情况去配置，下图是我项目的配置
setting 的具体改动
我们项目是固定在一个机器上进行打包，所以配置了该机器的镜像
这个是网络代理，因为网络较差，下载插件会失败（网络好的话，可不设置）
画红线部分就是写上maven的安装位置下的repository文件夹，其余不用设置
3、去拷贝别的java srv下的pom.xml到你的项目根目录下(为什么一定要pom.xml文件？答：maven靠pom.xml去执行)，把没用的内容都删掉（只留下一些版本和项目名称这些内容即可）
pom详细设置解答
<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>
<artifactId>前端代码文件夹名称</artifactId>
<version>${version}</version> <!--version变量-->
<packaging>pom</packaging><!--固定格式pom-->
<!--根目录下的相关配置-->
<parent>
<groupId>biolive</groupId>
<artifactId>app-parent</artifactId>
<version>6.0.0</version>
<relativePath>../../pom.xml</relativePath>
</parent>
<!--以上这些都是根据自己项目设置-->
<!--配置开始-->
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId><!--maven 可应用在前端的插件-->
<version>1.12.1</version><!--插件的版本-->
<configuration>
<installDirectory>${basedir}</installDirectory> <!-- 该插件的安装位置，这里我们设置的变量，代表的是根目录的意思，可根据自己的情况去设置 -->
</configuration>
<executions>
<execution>
<id>install node and npm</id> <!-- webpack必须有node支持，下载node和npm -->
<phase>compile</phase> <!-- 这个可写可不写，写了说明必须要执行这段命令 -->
<goals>
<goal>install-node-and-npm</goal><!-- 执行下载node和npm 命令-->
</goals>
<configuration>
<nodeVersion>v16.14.0</nodeVersion><!-- 这个v是必不可少的，因为node下载的官方地址，版本部分有带v -->
<npmVersion>6.14.5</npmVersion>
</configuration>
</execution>
<execution>
<id>npm install</id><!-- react脚手架默认的react插件下载的命令行，可根据自己情况调整-->
<phase>compile</phase>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>npm run build</id> <!-- react脚手架默认的react打包的命令行，可根据自己情况调整-->
<phase>compile</phase>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
</plugin>
<plugin>
<!-- 以上配置好以后，点击maven的clean和install 命令，就可以打包出react build文件夹了->
<!-- 打出react build文件夹后，这个事情已经成功了一半，剩下的就是怎么指定build文件夹让他编译成war包->
<artifactId>maven-assembly-plugin</artifactId><!--把打包出来的react build文件改成war格式的插件-->
<version>2.2.1</version>
<executions>
<execution>
<id>make-assembly</id>
<phase>package</phase>
<goals>
<goal>single</goal>
</goals>
</execution>
</executions>
<configuration>
<appendAssemblyId>false</appendAssemblyId>
<descriptors>
<descriptor>package.xml</descriptor><!--把打包出来的react build文件改成war格式的插件，该插件需要另外配置一个设置的打包 文件package.xml,我放在根目录下，package详细设置会贴图-->
</descriptors>
</configuration>
</plugin>
</plugins>
<finalName>${project.artifactId}</finalName><!--把war包的版本号去掉-->
</build>
<!--配置结束-->
<!--以下这些都是项目默认的，不用设置-->
<distributionManagement>
<snapshotRepository>
<id>snapshots</id>
<name>Nexus server</name>
<url>http://172.100.1.50:8081/nexus/content/repositories/snapshots</url>
</snapshotRepository>
<repository>
<id>releases</id>
<name>Nexus server</name>
<url>http://172.100.1.50:8081/nexus/content/repositories/releases</url>
</repository>
</distributionManagement>
</project>
package.xml的详细设置
<assembly>
<id>assembly</id>
<formats>
<format>war</format><!--代表要生成war包-->
</formats>
<includeBaseDirectory>true</includeBaseDirectory><!--设置成false代表没有生成新的文件夹即war解开就是react build 里的代码文件 -->
<fileSets>
<fileSet>
<directory>${basedir}\build</directory><!--指定打包的是根目录下的build文件-->
<outputDirectory>\</outputDirectory><!--指定打包出来的war包放在根目录下,说明：生成war包时会自动生成target的文件夹，target里放着war包 -->
</fileSet>
</fileSets>
</assembly>
网友评论