如何将 ReactJS 与 Spring Boot 集成答案

【问题标题】：How to integrate ReactJS with spring Boot如何将 ReactJS 与 Spring Boot 集成
【发布时间】：2018-01-03 00:32:19
【问题描述】：

我想将 ReactJS 与 Spring-boot 和 maven 集成，但我不知道如何。

我可以使用 npm 安装它，但我不知道我将在哪个路径中安装它。

npm init
npm install --save react react-dom

【问题讨论】：

标签： java spring maven reactjs spring-boot

【解决方案1】：

见frontend-maven-plugin

您应该在 pom.xml 文件中添加类似的内容

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.2</version>
    <configuration>
        <installDirectory>target</installDirectory>
    </configuration>
    <executions>
        <execution>
            <id>install node and npm</id>
            <goals>
                <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
                <nodeVersion>v4.4.5</nodeVersion>
                <npmVersion>3.9.2</npmVersion>
            </configuration>
        </execution>
        <execution>
            <id>npm install</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>install</arguments>
            </configuration>
        </execution>
        <execution>
            <id>webpack build</id>
            <goals>
                <goal>webpack</goal>
            </goals>
        </execution>
    </executions>
</plugin>

应该有 webpack.config.js 和 package.json 和 pom.xml 而webpack是这样的

var path = require('path');
var webpack = require('webpack');
var packageJSON = require('./package.json');

module.exports = {
    entry: [
              'webpack/hot/only-dev-server',
              './src/main/resources/static/App.js'],
    devtool: 'sourcemaps',
    cache: true,
//    debug: true,
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/bundle.js',
        publicPath: 'http://localhost:8080/yourServletContextHere'
    },
    resolve: {extensions: ['.js', '.jsx']},
    plugins: [
               new webpack.HotModuleReplacementPlugin()
               ,new webpack.LoaderOptionsPlugin({
                     debug: true
                   })
        ],
    module: {
        loaders: [
            {
                test: path.join(__dirname, '.'),
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                }
            },

        ]
    },
    devServer: {
            noInfo: false,
            quiet: false,
            lazy: false,
            watchOptions: {
                poll: true
           }
        }
};

【讨论】：

deos webpack.config.js 和 package.json 做什么，我应该把它们放在哪里？ npm 可以为我创建这个吗？
这里解释的太笼统了。 docs.npmjs.com/files/package.json 和 webpack.github.io/docs/what-is-webpack.html
你的 pom.xml 所在的文件夹
谢谢，我按照你说的做了，但是当我在浏览器中对某些源文件进行更改时，它仍然可以使用旧版本。

【解决方案2】：

看看这个来自春天的存储库。这里的项目使用React+SpringBoot+WebpackV1

https://github.com/spring-guides/tut-react-and-spring-data-rest

这是上述存储库的实际教程，请仔细阅读它的解释。 https://spring.io/guides/tutorials/react-and-spring-data-rest/

【讨论】：