如何配置npm以使用maven文件夹结构和war部署

Question

我开始了我的第一个纯前端项目.我想将它部署到java/maven.所以我建立了一个正常的战争项目:

?   package.json
?   pom.xml
?   tsconfig.json
?   typings.json
?
?
????src
?   ????main
?       ????resources
?       ????webapp
?           ?   index.html
?           ?
?           ????app
?           ?       app.component.ts
?           ?       main.ts
?           ?
?           ????css
?           ?       styles.css
?           ?
?           ????WEB-INF
?                   web.xml
?

我的问题是如何设置index.html /相对于包的源的路径.JSON？由于这是一个角度/打字稿项目,因此还有一些打字稿特定的东西.但我希望在包装json中一劳永逸地设置"源"路径？!

我也不确定我是否要直接在"webapp"中部署这些东西,因为有编译步骤.因此,欢迎任何关于如何构建用于maven/war部署的pur前端项目的建议.

Answer 1

为了将NPM与Maven集成,您可以使用frontend-maven-plugin,我认为这将是您编译步骤的一个很好的工具.

因此,为了将所有内容配置在一起,您的pom.xml应该如下所示:

<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">

    <modelVersion>4.0.0</modelVersion>

    <groupId>group.id</groupId>
    <artifactId>artifact-id</artifactId>
    <version>2.0.14-SNAPSHOT</version>

    <name>Artifact Name</name>

    <packaging>war</packaging>

    <!-- Plug-in definition -->
    <build>
        <plugins>
            <!-- frontend-maven plug-in -->
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>0.0.29</version>
                <configuration>
                    <nodeVersion>v5.10.1</nodeVersion>
                    <npmVersion>3.8.6</npmVersion>
                    <installDirectory>target</installDirectory>
                    <workingDirectory>${basedir}</workingDirectory>
                </configuration>
                <executions>
                    <!-- install node & npm -->
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                    </execution>

                    <!--npm install -->
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>

                    <!-- npm run build -->
                    <execution>
                        <id>npm run build</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

            <!-- Maven WAR plug-in -->
            <plugin>
                <artifactId>maven-war-plugin</artifactId>
                <configuration>
                    <webXml>src/main/webapp/WEB-INF/web.xml</webXml>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

如您所见,首先我们定义frontend-maven-plugin的用法:

• 我们使用最新的稳定 NodeJS版本:v5.10.1;
• NPM的最新版本:3.8.6;
• 由于插件下载并安装了NodeJS和NPM,因此需要声明安装目录(installDirectory).我选择将所有内容存储在Maven的目标目录中;
• 然后有必要定义一个工作目录(workingDirectory),它基本上是我们的package.json所在的目录.在您的情况下,它将与您的pom.xml文件处于同一级别,因此我们使用$ {basedir} ;

• 接下来,有必要定义执行:我认为前两个是非常简单的; 最后一个简单的假设,你里面的package.json,有一个脚本目标命名构建将,例如,拨打browserify,以建立一个命令bundle.js文件:

  "scripts": {
      "build": "browserify src/main/webapp/app.js -o src/main/webapp/modules/bundle.js"
  }
  

  在你的情况,而不是app.js,中的package.json将与您的打字稿文件交互.

最后,有一个Maven WAR插件的定义.唯一的配置是提到web.xml所在的位置.

请注意,根据定义,Maven将打包src/main/webapp目录中的所有内容.因此,如果您要排除任何文件(或文件夹),则应使用配置参数<packagingExcludes>:

<!-- Maven WAR plug-in -->
<plugin>
    <artifactId>maven-war-plugin</artifactId>
    <configuration>
        <webXml>src/main/webapp/WEB-INF/web.xml</webXml>
        <packagingExcludes>app/**</packagingExcludes>
    </configuration>
</plugin>

上面的配置将排除文件夹应用程序.

同样,这是一个起点.从这里开始,您可以使用Maven来自定义构建应用程序.