其他分享
首页 > 其他分享> > frontend-maven-plugin webjars 模式构建web app

frontend-maven-plugin webjars 模式构建web app

作者:互联网

webjars 没有太多高深的技术,我以前也写过相关介绍,webjars 的好处是灵活,而且利用了好多servelet 的特性,同时定义了比较好的
业界实现,是一个很值得参考的玩法

参考代码

 
<?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>
 
├── 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