目的很簡單就是學習下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