frontendmavenplugin 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