如何配置NPM以使用Maven文件夹结构和War部署

为了将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>

上面的配置将排除文件夹app。

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