我正在使用React开发一个Web应用程序，我想制作一个应该可部署的项目的WAR文件。如果有人可以提供良好的资源或帮助我，我需要帮助吗？
答案 0 :(得分：2)
首先，添加pom.xml并将其设为maven项目，然后进行构建。它将在目标文件夹中为您创建一个War文件，之后您可以将其部署到任意位置。
http://maven.apache.org/xsd/maven-4.0.0.xsd“> 4.0.0 it.megadix 我的应用 0.0.1-快照 战争
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<npm.output.directory>build</npm.output.directory>
</properties>
<build>
<finalName>${project.artifactId}</finalName>
<plugins>
<!-- Standard plugin to generate WAR -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.1.1</version>
<configuration>
<webResources>
<resource>
<directory>${npm.output.directory}</directory>
</resource>
</webResources>
<webXml>${basedir}/web.xml</webXml>
</configuration>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.3.2</version>
<executions>
<!-- Required: The following will ensure `npm install` is called
before anything else during the 'Default Lifecycle' -->
<execution>
<id>npm install (initialize)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>initialize</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>install</argument>
</arguments>
</configuration>
</execution>
<!-- Required: The following will ensure `npm install` is called
before anything else during the 'Clean Lifecycle' -->
<execution>
<id>npm install (clean)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>pre-clean</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>install</argument>
</arguments>
</configuration>
</execution>
<!-- Required: This following calls `npm run build` where 'build' is
the script name I used in my project, change this if yours is
different -->
<execution>
<id>npm run build (compile)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>compile</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>run</argument>
<argument>build</argument>
</arguments>
</configuration>
</execution>
</executions>
<configuration>
<environmentVariables>
<CI>true</CI>
<!-- The following parameters create an NPM sandbox for CI -->
<NPM_CONFIG_PREFIX>${basedir}/npm</NPM_CONFIG_PREFIX>
<NPM_CONFIG_CACHE>${NPM_CONFIG_PREFIX}/cache</NPM_CONFIG_CACHE>
<NPM_CONFIG_TMP>${project.build.directory}/npmtmp</NPM_CONFIG_TMP>
</environmentVariables>
</configuration>
</plugin>
</plugins>
</build>
<profiles>
<profile>
<id>local</id>
<activation>
<activeByDefault>true</activeByDefault>
</activation>
<build>
<plugins>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<configuration>
<environmentVariables>
<PUBLIC_URL>http://localhost:7001/${project.artifactId}</PUBLIC_URL>
<REACT_APP_ROUTER_BASE>/${project.artifactId}</REACT_APP_ROUTER_BASE>
</environmentVariables>
</configuration>
</plugin>
</plugins>
</build>
</profile>
<profile>
<id>prod</id>
<build>
<plugins>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<configuration>
<environmentVariables>
<PUBLIC_URL>http://my-awesome-production-host/${project.artifactId}</PUBLIC_URL>
<REACT_APP_ROUTER_BASE>/${project.artifactId}</REACT_APP_ROUTER_BASE>
</environmentVariables>
</configuration>
</plugin>
</plugins>
</build>
</profile>
</profiles>
注意：-如果在运行项目后发现空白页，请清除缓存或重新启动IDE。
答案 1 :(得分：0)
您可以使用 webpack-war-plugin 构建战争文件：
在项目文件夹中创建.bablerc和webpack.config.js文件及其内容：
.bablerc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
webpack.config.js
const path = require('path');
const { WebpackWarPlugin } = require('webpack-war-plugin');
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(html|css)$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new WebpackWarPlugin(),
new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html"
})
]
};
向build war文件中添加package.json脚本和开发依赖项。
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build war": "webpack"
}
"devDependencies": {
"webpack-cli": "^3.3.11",
"babel-loader": "^8.1.0",
"html-loader": "^1.1.0",
"webpack-war-plugin": "^1.0.0-beta.3",
"@babel/core": "^7.10.2",
"@babel/preset-env": "^7.10.2",
"@babel/preset-react": "^7.10.1"
}
运行npm update以提供依赖项
然后使用build war脚本创建war file。
答案 2 :(得分：0)
如果您使用 create-react-app 来创建您的应用程序，只需将其添加到 package.json 中的“脚本”部分：
"compile": "npm run build && cd build && jar -cvf web.war ."
然后执行do：
npm 运行编译
它将：
要配置代理以调用服务器，请查看 this 答案。
还要将此行添加到您的 package.json 中： “主页”：“.”
你的 package.json 应该是这样的： ...
"homepage": ".",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"compile": "npm run build && cd build && jar -cvf terminal.war ."
},
...