前端项目maven打jar包

1.思路

• 第一步：获取构建后的文件

  • 安装依赖：npm install
  • 构建：npm run build 一般会把构建后的文件放在dist文件夹下

• 第二步：将构建后的文件打成jar包

2.准备工作

2.1转化为maven项目

将前端项目转化为maven项目：项目根目录添加pom.xml 利用IDE右键pom.xml转化为Add as Maven Project。

不知道的百度一下网上很多教程。

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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
​
    <groupId>com.example</groupId>
    <artifactId>hello-world</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>hello-world</name>
    <description>hello-world</description>
​
​
    <build>
​
    </build>
​
</project>

2.2涉及maven知识(可以不看)

maven 生命周期（来自maven官网）：

• default Lifecycle
• clean Lifecycle
• site Lifecycle

这里我们只关心第一个default Lifecycle（来自maven官网）：

<phases>
  <phase>validate</phase>
  <phase>initialize</phase>
  <phase>generate-sources</phase>
  <phase>process-sources</phase>
  <phase>generate-resources</phase>
  <phase>process-resources</phase>
  <phase>compile</phase>
  <phase>process-classes</phase>
  <phase>generate-test-sources</phase>
  <phase>process-test-sources</phase>
  <phase>generate-test-resources</phase>
  <phase>process-test-resources</phase>
  <phase>test-compile</phase>
  <phase>process-test-classes</phase>
  <phase>test</phase>
  <phase>prepare-package</phase>
  <phase>package</phase>
  <phase>pre-integration-test</phase>
  <phase>integration-test</phase>
  <phase>post-integration-test</phase>
  <phase>verify</phase>
  <phase>install</phase>
  <phase>deploy</phase>
</phases>

我们要打成jar包，命令是：

mvn -DskipTests=true package

也就是说phase阶段只要在package之前完成就可以了:

<phase>validate</phase>
<phase>initialize</phase>
<phase>generate-sources</phase>
<phase>process-sources</phase>
<phase>generate-resources</phase>
<phase>process-resources</phase>
<phase>compile</phase>
<phase>process-classes</phase>
<phase>generate-test-sources</phase>
<phase>process-test-sources</phase>
<phase>generate-test-resources</phase>
<phase>process-test-resources</phase>
<phase>test-compile</phase>
<phase>process-test-classes</phase>
<phase>test</phase>
<phase>prepare-package</phase>
<phase>package</phase>

文章后面中pom.xml中plugin的phase字段值只能在上面阶段，不必一定要照搬本文。

3.第一步实现

3.1手动运行

直接在项目根目录下输入命令：(不同项目构建命令不一样，以自己项目为准)

npm install
npm run build

3.2插件exec-maven-plugin实现

pom.xml添加：

<build>
    <plugins>
        <plugin>
            <groupId>org.codehaus.mojo</groupId>
            <artifactId>exec-maven-plugin</artifactId>
            <version>1.6.0</version>
            <executions>
                <!--执行npm install-->
                <execution>
                    <id>exec-npm-install</id>
                    <phase>generate-resources</phase>
                    <goals>
                        <goal>exec</goal>
                    </goals>
                    <configuration>
                        <executable>npm</executable>
                        <arguments>
                            <argument>install</argument>
                        </arguments>
                        <workingDirectory>${basedir}</workingDirectory>
                    </configuration>
                </execution>
​
                <!--执行npm run build-->
                <execution>
                    <id>exec-npm-run-build</id>
                    <phase>generate-resources</phase>
                    <goals>
                        <goal>exec</goal>
                    </goals>
                    <configuration>
                        <executable>npm</executable>
                        <arguments>
                            <argument>run</argument>
                            <arguments>build</arguments>
                        </arguments>
                        <workingDirectory>${basedir}</workingDirectory>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

3.3插件frontend-maven-plugin实现

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.6</version>
    <configuration>
        <workingDirectory>${basedir}</workingDirectory>
    </configuration>
    <executions>
        <!-- 本地安装node和npm-->
        <execution>
            <phase>prepare-package</phase>
            <id>install-node-and-npm</id>
            <goals>
                <goal>install-node-and-npm</goal>
            </goals>
            <!-- 如果本地已安装，最好保持版本一致 -->
            <configuration>
                <nodeVersion>v16.14.2</nodeVersion>
                <npmVersion>8.5.0</npmVersion>
            </configuration>
        </execution>
        <!--执行npm install-->
        <execution>
            <phase>prepare-package</phase>
            <id>npm-install</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>install</arguments>                
            </configuration>
        </execution>
        <!--执行npm run build-->
        <execution>
            <phase>prepare-package</phase>
            <id>npm-run-build</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>run build</arguments>                
            </configuration>
        </execution>
    </executions>
</plugin>

4.第二步实现

打包插件太多了，这里只用常见的maven-resources-plugin插件实现将dist目录拷贝至打包目录。然后利用maven-jar-plugin打包。

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <version>3.2.0</version>
    <configuration>
        <encoding>UTF-8</encoding>
    </configuration>
    <executions>
        <execution>
            <id>copy-resources</id>
            <phase>prepare-package</phase>
            <goals>
                <goal>copy-resources</goal>
            </goals>
            <configuration>
                <outputDirectory>
                    ${project.build.outputDirectory}/META-INF/resources/${project.artifactId}                               </outputDirectory>
                <resources>
                    <resource>
                        <directory>dist</directory>
                        <filtering>true</filtering>
                    </resource>
                </resources>
            </configuration>
        </execution>
    </executions>
</plugin>

5.最终实现

第一步和第二步合起来就是最终实现，这里给一个样例：

<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
​
    <groupId>com.example</groupId>
    <artifactId>hello-world</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>hello-world</name>
    <description>hello-world</description>
​
​
    <build>
        <plugins>
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>exec-maven-plugin</artifactId>
                <version>1.6.0</version>
                <executions>
                    <!--执行npm install-->
                    <execution>
                        <id>exec-npm-install</id>
                        <phase>generate-resources</phase>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <configuration>
                            <executable>npm</executable>
                            <arguments>
                                <argument>install</argument>
                            </arguments>
                            <workingDirectory>${basedir}</workingDirectory>
                        </configuration>
                    </execution>
​
                    <!--执行npm build-->
                    <execution>
                        <id>exec-npm-run-build</id>
                        <phase>generate-resources</phase>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <configuration>
                            <executable>npm</executable>
                            <arguments>
                                <argument>run</argument>
                                <arguments>build</arguments>
                            </arguments>
                            <workingDirectory>${basedir}</workingDirectory>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-resources-plugin</artifactId>
                <version>3.2.0</version>
                <configuration>
                    <encoding>UTF-8</encoding>
                </configuration>
                <executions>
                    <execution>
                        <id>copy-resources</id>
                        <phase>prepare-package</phase>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <!-- 输出目录，根据自己实际情况定 -->
                            <outputDirectory>
                                ${project.build.outputDirectory}/META-INF/resources/${project.artifactId}                               </outputDirectory>
                            <resources>
                                <resource>
                                    <!-- npm构建完成后的目录，根据实际情况定 -->
                                    <directory>dist</directory>
                                    <filtering>true</filtering>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

测试打包请输入：

mvn -DskipTests=true package

6.后记

• 打成jar包后可以deploy到maven私服

• springboot项目可以引用，配置静态资源目录

  spring.resources.static-locations=classpath:/META-INF/resources/
  或者
  spring.web.resources.static-locations=classpath:/META-INF/resources/