如何将ReactJS与Spring Boot集成 [英] How to integrate ReactJS with spring Boot

问题描述

他在那里， 我想将 ReactJS 与 Spring-boot 和 maven 集成在一起，但是我不知道怎么做！ 我可以使用npm来安装它，但是我不知道它会在哪里完成

He there, I want to integrate ReactJS with Spring-boot and maven but I don't know how !! I can use npm to install it but I don't know in wich path I will do that

npm初始化

npm install --save react react-dom

npm install --save react react-dom

推荐答案

请参见 frontend-maven-plugin

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

You should add something like this to your pom.xml file

        <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就是这样

There should be webpack.config.js and package.json together with pom.xml and the webpack is like this

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
           }
        }
};

这篇关于如何将ReactJS与Spring Boot集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！