frontend-maven-plugin 插件学习
目的很简单就是学习下frontend-maven-plugin 的使用，同时集成到spring boot 应用中
参考玩法
- 整体参考图
- 代码结构
├── README.md
├── console
│ ├── pom.xml
│ └── src
│ ├── main
│ │ ├── java
│ │ │ └── com
│ │ │ └── dalong
│ │ │ └── Application.java
│ │ └── resources
│ └── test
│ └── java
├── demoui
│ ├── package.json
│ ├── pom.xml
│ ├── src
│ │ └── index.js
│ └── yarn.lock
├── pom.xml
├── src
│ ├── main
│ │ ├── java
│ │ └── resources
│ └── test
│ └── java
└── ui
├── pom.xml
└── src
├── main
│ ├── java
│ └── resources
│ └── resources
│ └── index.html
└── test
└── java
- 代码说明
console 是入口，一个spring boot 的web 项目,核心是maven 依赖，包含了几个ui 的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">
<parent>
<artifactId>bootstrap</artifactId>
<groupId>com.dalongdemo</groupId>
<version>1.0-SNAPSHOT</version>
</parent>
<modelVersion>4.0.0</modelVersion>
<artifactId>console</artifactId>
<properties>
<maven.compiler.source>8</maven.compiler.source>
<maven.compiler.target>8</maven.compiler.target>
</properties>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-dependencies</artifactId>
<version>2.2.6.RELEASE</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>com.dalongdemo</groupId>
<artifactId>ui</artifactId>
<version>1.0-SNAPSHOT</version>
</dependency>
<dependency>
<groupId>com.dalongdemo</groupId>
<artifactId>demoui</artifactId>
<version>1.0-SNAPSHOT</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<executions>
<execution>
<goals>
<goal>repackage</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
ui 就是一个遵循spring boot resource 约定的一个index
主要是resources 下边的resources/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo app</title>
</head>
<body>
<div id="mydemoapp"></div>
<script src="./demoui/main.js"></script> // 此处引用了demoui 包可以提供的静态资源
</body>
</html>
demoui 主要是基于parcel 以及frontend-maven-plugin 插件打包的jar 
src/index.js
document.getElementById("mydemoapp").innerHTML="<div>dalong demo app</div>"
package.json
{
"name": "demoui",
"version": "1.0.0",
"source": "src/index.js",
"main": "target/classes/resources/demoui/main.js", // 输出
"license": "MIT",
"devDependencies": {
"parcel": "^2.2.1"
},
"scripts": {
"watch": "parcel watch",
"build": "parcel build"
}
}
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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<parent>
<artifactId>bootstrap</artifactId>
<groupId>com.dalongdemo</groupId>
<version>1.0-SNAPSHOT</version>
</parent>
<modelVersion>4.0.0</modelVersion>
<artifactId>demoui</artifactId>
<properties>
<maven.compiler.source>8</maven.compiler.source>
<maven.compiler.target>8</maven.compiler.target>
</properties>
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.11.3</version>
<executions>
<execution>
<!-- optional: you don't really need execution ids, but it looks nice in your build log. -->
<id>install node and yarn</id>
<goals>
<goal>install-node-and-yarn</goal>
</goals>
<!-- optional: default phase is "generate-resources" -->
<phase>generate-resources</phase>
<configuration>
<nodeVersion>v16.8.0</nodeVersion>
<yarnVersion>v1.22.11</yarnVersion>
</configuration>
</execution>
<execution>
<id>yarn install</id>
<goals>
<goal>yarn</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>build minimized webpack bundle</id>
<phase>generate-resources</phase>
<goals>
<goal>yarn</goal>
</goals>
<configuration>
<arguments>build</arguments>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
效果
扩展玩法
- 参考图
- 说明
利用注册中心以及maven jar 包灵活的管理，集合注册中心我们可以实现方便的权限管理以及资源处理
说明
当然前后端的集成模式是很多的，集成在一起，以及独立开都是不同的玩法，但是基于jar 管理web 静态资源的好处是版本化，统一化，而且可以统一
软件的发布，当然没有银弹，根据团队规模选择合适的才是对的,webjars 是一个很不错的实践我们是可以参考使用的，如果集成起来就更加标准了,而且
webjars 就是基于java 生态的标准搞的，支持的框架也是很多的
参考资料
https://github.com/eirslett/frontend-maven-plugin
https://github.com/rongfengliang/frontend-maven-plugin-learning
https://www.webjars.org/
https://github.com/webjars/webjars
https://spring.io/blog/2014/01/03/utilizing-webjars-in-spring-boot
