frontend-maven-plugin webjars 模式构建web app
webjars 没有太多高深的技术，我以前也写过相关介绍，webjars 的好处是灵活，而且利用了好多servelet 的特性，同时定义了比较好的
业界实现，是一个很值得参考的玩法
参考代码
- 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>moduleapp</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>b-publish</arguments>
</configuration>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<executions>
<execution>
<id>Copy target static folder</id>
<phase>process-resources</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<outputDirectory>${project.build.outputDirectory}/META-INF/resources/webjars/moduleapp</outputDirectory>
<resources>
<resource>
<directory>dist</directory>
<filtering>false</filtering>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
- 代码结构
基于parcel 构建
├── package.json
├── pom.xml
├── src
│ ├── frontend
│ │ ├── app.css
│ │ └── index.html
│ ├── main
│ │ ├── java
│ │ └── resources
│ └── test
│ └── java
└── yarn.lock
package.json
parcel 的build --public-url 比较重要，使用相对路径
{
"name": "moduleapp",
"version": "1.0.0",
"source": "src/frontend/index.html",
"license": "MIT",
"devDependencies": {
"parcel": "^2.2.1"
},
"scripts": {
"build": "parcel build",
"b-publish": "parcel build --public-url ."
},
"dependencies": {
"clientjs": "^0.2.1"
}
}
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>demoapp</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div id="id2"></div>
<script type="module">
import {ClientJS} from 'clientjs';
// Create a new ClientJS object
const client = new ClientJS();
// Get the client's fingerprint id
const fingerprint = client.getFingerprint();
// Print the 32bit hash id to the console
document.getElementById("id2").innerHTML = fingerprint;
</script>
</body>
</html>
构建&使用
- 构建
mvn clean package
- 效果
spring boot 应用集成(引用maven包就可以了)
访问路径:http://ip:port/webjars/moduleapp/index.html 
参考资料
https://www.webjars.org/documentation
https://parceljs.org/features/cli/
https://github.com/eirslett/frontend-maven-plugin
https://www.cnblogs.com/rongfengliang/p/15855304.html
