标签：web webjars frontend yarn maven build org resources
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
标签：web,webjars,frontend,yarn,maven,build,org,resources 来源： https://www.cnblogs.com/rongfengliang/p/15866295.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。