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部署的前端项目的建议。

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的目标目录中;
然后有必要定义一个工作目录（ workingDirectory ），它基本上是我们的 package.json 所在的目录。在您的情况下，它将与 pom.xml 文件处于同一级别，因此我们使用 $ {basedir} ;
接下来，有必要定义执行：我认为前两个是非常简单的;最后一个假设在 package.json 中，有一个名为 build 的脚本目标，例如，它将调用 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来自定义构建应用程序。

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

1 个答案: