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

Question

我开始了我的第一个纯前端项目。我想将它部署到 java/maven。所以我设置了一个普通的 war 项目：

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

我的问题是如何设置索引的路径。html/the 源相对于包。 json？由于这是一个 angular/typescript 项目，所以还有一些特定于打字稿的内容。但我希望在包 json?!

中一劳永逸地设置 "source" 路径

我也不确定是否要直接部署 "webapp" 中的内容，因为有编译步骤。因此，欢迎任何有关如何为 maven/war 部署构建 pur 前端项目的建议。

Answer 1

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

因此，为了一起配置所有内容，您的 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[=67= 的 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>:

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

上面的配置会排除文件夹 app.

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

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

How to configure npm to use maven folder structure and war deployment

war

maven

npm

typescript

angular