如何配置NPM以使用Maven文件夹结构和War部署 [英] How to configure npm to use maven folder structure and war deployment
问题描述
我开始了我的第一个纯前端项目.我想将其部署为Java/Maven.所以我建立了一个正常的战争项目:
I began my first pure front end project. I want to deploy it the java/maven. So i set up a normal war project:
│ 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包中一劳永逸地设置源"路径?！
My problem is how to set the path to index.html/the source relative to package. json? Since this is an angular/typescript project there is also some typescript specific stuff. but my hope is to set the "source" path once and for all in package json?!
我也不确定是否要直接在"webapp"中部署这些内容，因为有编译步骤.因此，欢迎提供任何有关如何构造纯前端项目以进行Maven/war部署的建议.
I am also not sure if i want to deploy the stuff in "webapp" directly since there are Compiling steps. So any advice how to structure a pur front end project for maven/war deployment are welcome.
推荐答案
为了将NPM与Maven集成，您可以使用 frontend-maven-plugin ，我认为这将是您编译步骤的好工具.
In order to integrate NPM with Maven, you could make use of frontend-maven-plugin which I think will be a great tool for your compiling steps.
因此，为了一起配置所有内容，您的 pom.xml 应该如下所示:
So, in order to configure everything together this how your pom.xml should look like:
<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 的用法:
As you can see, first we define the usage of frontend-maven-plugin:
- 我们使用最新的稳定的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 文件:
- we use the most recent stable NodeJS version: v5.10.1;
- the most recent version of NPM: 3.8.6;
- since the plugin downloads and installs NodeJS and NPM, one needs to declare the installation directory (installDirectory). I've opted to store everything on Maven's target directory;
- then it's necessary to define one's working directory (workingDirectory), which basically is the directory where our package.json will be. In your case, it will be at the same level as your pom.xml file, so we use ${basedir} for that;
following, it will be necessary to define the executions: the first two I believe that are quite straightforward; the last one simply assumes that, inside your package.json, there's a script target named build which will, for example, call the browserify command in order to build a bundle.js file:
"scripts": {
"build": "browserify src/main/webapp/app.js -o src/main/webapp/modules/bundle.js"
}
在您的情况下， package.json 会与您的打字稿文件交互，而不是 app.js .
In your case, instead of the app.js, the package.json would interact with your typescript files.
最后，定义了 Maven WAR插件.唯一进行的配置是提及 web.xml 所在的位置.
Finally, one has the definition of the Maven WAR plugin. The only configuration made was the mention to the location where the web.xml is.
请注意，按照定义，Maven将打包 src/main/webapp 目录中的所有内容.因此，如果要排除任何文件(或文件夹)，则应使用配置参数
Notice that, by definition, Maven will package everything that's inside src/main/webapp directory. So, if there are any files (or folders) that you'd like to exclude, you should make use of the configuration parameter <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 .
The configuration above would exclude the folder app.
同样，这是一个起点.从这里开始，您可以使用Maven来自定义构建应用程序.
Again, this is a starting point. From here, you could play with Maven in order to custom build your application.
这篇关于如何配置NPM以使用Maven文件夹结构和War部署的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
