frontend-maven-plugin是一款Maven插件，专为在Maven项目中无缝集成前端构建工具而生。它支持Node.js、NPM、Yarn、Bower、Grunt、Gulp、Jspm、Karma和Webpack等主流前端工具。核心能力包括：在项目本地自动下载和安装Node与NPM，无需全局安装；执行npm install等前端构建命令；跨Windows、OS X和Linux平台一致运行。这确保了每个构建环境使用统一的Node和NPM版本，避免环境不一致问题。

快速上手

1. 获取项目源码

从仓库克隆frontend-maven-plugin项目：

git clone https://github.com/eirslett/frontend-maven-plugin.git

2. Maven项目配置

在pom.xml中配置插件，指定Node和NPM版本并定义构建阶段：

<project>
  <build>
    <plugins>
      <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>1.12.0</version>
        <executions>
          <execution>
            <id>setup-node-npm</id>
            <goals>
              <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
              <nodeVersion>v14.17.0</nodeVersion>
              <npmVersion>6.14.13</npmVersion>
            </configuration>
          </execution>
          <execution>
            <id>install-deps</id>
            <goals>
              <goal>npm</goal>
            </goals>
          </execution>
          <execution>
            <id>build-frontend</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>run build</arguments>
            </configuration>
          </execution>
        </executions>
      </plugin>
    </plugins>
  </build>
</project>

3. 执行构建

在项目根目录运行Maven命令：

mvn clean install

实战案例：Vue.js项目集成

项目结构

假设有一个Maven项目包含Vue.js前端：

my-project/
├── pom.xml
├── src/
│   └── main/
│       └── frontend/
│           ├── package.json
│           ├── public/
│           └── src/

pom.xml配置

配置插件以安装Node/NPM、安装依赖并构建Vue应用：

<project>
  <build>
    <plugins>
      <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>1.12.0</version>
        <executions>
          <execution>
            <id>setup-node-npm</id>
            <goals>
              <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
              <nodeVersion>v14.17.0</nodeVersion>
              <npmVersion>6.14.13</npmVersion>
            </configuration>
          </execution>
          <execution>
            <id>install-deps</id>
            <goals>
              <goal>npm</goal>
            </goals>
          </execution>
          <execution>
            <id>build-frontend</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>run build</arguments>
            </configuration>
          </execution>
        </executions>
      </plugin>
    </plugins>
  </build>
</project>

package.json示例

前端项目的package.json需包含构建脚本，例如：

{
  "scripts": {
    "build": "vue-cli-service build"
  }
}

至此，Maven构建会自动完成Node/NPM安装、依赖下载和前端打包，无需手动干预。