如何配置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？由于这是一个 angular/typescript 项目，因此还有一些 typescript 特定的东西。但我希望在包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的用法：

• 我们使用最新的stable NodeJS 版本：v5.10.1；
• NPM 的最新版本：3.8.6；
• 由于插件下载安装NodeJS和NPM，需要声明安装目录（installDirectory）。我选择将所有内容存储在 Maven 的 target 目录中；
• 然后有必要定义一个工作目录（workingDirectory），这基本上就是我们的package.json所在的目录。在您的情况下，它将与您的 pom.xml 文件处于同一级别，因此我们为此使用 ${basedir}；

• 接下来，有必要定义处决：我认为前两个非常简单；最后一个只是假设，在您的 package.json 中，有一个名为 build 的 script 目标，例如，它将调用 browserify 命令以构建 bundle.js 文件：

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

  在您的情况下，package.json 将与您的打字稿文件进行交互，而不是 app.js。

---

最后，有Maven WAR plugin 的定义。唯一的配置是提及 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>

以上配置将排除文件夹app。

同样，这是一个起点。从这里，您可以使用 Maven 来自定义构建您的应用程序。