在Maven中前端构建实践

Posted 2021-04-30 子谦说

NodeJS为前端技术的发展带来了一次革新，层出不穷的前端库、框架以及打包工具让大家应接不暇，然而这使得前端技术越来越依赖于NodeJS，基于NodeJS编写的前后台项目可以使用同一编译或者打包工具进行管理从而做到无缝的前后端版本控制以及联调等事情上的统一。

在这样的背景下，Java微服务也需要在项目内实现前端项目的统一打包处理，完成前后端的自动化。那么问题就产生了，我们需要在Maven打包时提供一个基于NodeJS的构建插件，接下来我将介绍frontend-maven-plugin。

该插件直接将NodeJS以及NPM下载安装到项目本地，与系统环境中的NodeJS隔离开来，降低了服务迁移中服务对服务器NodeJS版本的依赖，提高了服务的可移植性。同时，服务的前端与后端又尽可能的相对隔离，最大限度的减少前后端的相互作用，提高开发效率。前端开发人员依旧在服务项目中使用本地NodeJS进行开发调试，运维在生产打包时运行查件将前端dist文件打入相应的war包或者jar包中完成部署。

▼接下来介绍一下插件的相关配置以及使用方法

代码示例-1中，configuration标签中涉及到了两个配置项，一个是installDirectory，该配置项是用于指定项目中NodeJS以及NPM的安装目录；另一个是workingDirectory，这一配置项用于指定静态资源目录，既含有package.json的前端静态资源的相对目录，如果该目录未指定将默认为Maven打包根目录既pom.xml目录下。

<plugin>

    <groupId>com.github.eirslett</groupId>

    <artifactId>frontend-maven-plugin</artifactId>

       <version>1.4</version>

       <configuration>

           <installDirectory>target</installDirectory>

           <workingDirectory>src/main/static/</workingDirectory>

       </configuration>

       ……

</plugin>

代码示例-1

配置完成后，我需要执行一些命令来安装NodeJS、NPM以及前端构建所需要的node_modules，同时在安装完成后来执行打包等命令来完成前端构建。下面的代码示例-2中我们看到插件的命令是由一个executions组成，而一个executions又是由多个execution组成共同完成前端构建的。在这些执行任务中，首先是install node and npm的命令，完成项目目录下NodeJS与NPM的安装，该命令中可以指定NodeJS与NPM的版本，来提高前端开发本地开发环境与生产环境的一致性。接下来就是执行一系列node_modules安装以及打包构建项目的命令。值得一提的是插件支持npm，yarn,bower,grunt,gulp,jspm,karma以及webpack提供了诸多的前端构建的选择。

<plugin>

   ……

   <executions>

       <execution>

           <id>install node and npm</id>

              <goals>

                  <goal>install-node-and-npm</goal>

              </goals>

              <configuration>

                  <nodeVersion>v7.4.0</nodeVersion>

                  <npmVersion>4.0.5</npmVersion>

              </configuration>

        </execution>

        <execution>

            <id>npm install</id>

            <goals>

               <goal>npm</goal>

            </goals>

            <configuration>

               <arguments>install</arguments>

            </configuration>

            </execution>

            <execution>

               <id>npm build</id>

               <goals>

                  <goal>npm</goal>

               </goals>

               <configuration>

                  <arguments>run build</arguments>

               </configuration>

         </execution>

    </executions>

</plugin>

代码示例-2

代码示例-3中，通过downloadRoot可以切换NodeJS下载的镜像来源，若出现国外镜像无法使用的状况时，需要切换国内镜像。

<execution>

    <id>install node and npm</id>

    <goals>

       <goal>install-node-and-npm</goal>

    </goals>

    <configuration>

       <nodeVersion>v7.4.0</nodeVersion>

       <npmVersion>4.0.5</npmVersion>

       <downloadRoot>http://npm.taobao.org/mirrors/node/<downloadRoot>    

     </configuration>

</execution>

代码示例-3

当然也可以像代码示例-4中一样指定NodeJS以及NPM的镜像。

<plugin>

    <groupId>com.github.eirslett</groupId>

    <artifactId>frontend-maven-plugin</artifactId>

       <version>1.4</version>

       <configuration>

           <installDirectory>target</installDirectory>

           <workingDirectory>src/main/static/</workingDirectory>

           <nodeDownloadRoot>http://npm.taobao.org/mirrors/node/<nodeDownloadRoot>

            <npmDownloadRoot>http://npm.taobao.org/mirrors/npm/<nopmDownloadRoot>

       </configuration>

       ……

</plugin>

代码示例-4

▼注意

插件会将NodeJS下载到Maven本地仓库中缓存起来，再次打包时会直接取用缓存中的NodeJS包来打包。

这样就造成了首次下载失败，再次下载需要删除掉本地缓存。

◀欢迎关注子谦说获取更多▶