eclipse - 如何在 eclipse 中将 ReactJs 与 Spring MVC 集成

Question

在我为客户端使用 angularJS 之前，我是 ReactJS 的新手。但现在我想将它与 SpringMVC 上的当前应用程序集成。现在我想将 ReactJS 集成为客户端而不是 angularJS，请帮助我。如果有任何例子请帮忙。我正在使用 eclipse ide。

Answer 1

尝试创建一个 View (jsp/html/xhtml)并将 UI 构建输出链接到该 View 。您可以使用 webpack 作为 UI(React) 的构建工具，它将返回捆绑文件。

然后可以使用脚本标签将其包含在内以进行查看。请注意，您可以使用 webpack-dev-server 进行 UI 开发，并尝试使用 Proxy 来消费 spring-mvc 服务。这是一个推荐的方式。如果您使用 Maven 作为 java 的构建工具，则可以使用包含 webapp 下所有 JS 的文件夹。

webpack 引用:https://webpack.js.org/

示例Webpack.config.js供引用。

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        main: './src/scripts/main.js',
        engine: './src/scripts/engine/Engine.js',
        debugger: './src/scripts/debug/Debugmain.js',
        client: './src/scripts/clientcode/Client.js'
    },
    output: {
        path: path.resolve('./dist/client'),
        filename: '[name].js',
        publicPath: '/dist/client/',
        chunkFilename: '[name].js'
    },
    devtool: 'inline-sourcemap',
    cache: true,
    resolve: {
        alias: { ByteBuffer: 'bytebuffer' }
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'react-hot-loader'
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    cacheDirectory: true,
                    presets: ['react', 'es2015'],
                    compact: false
                }
            },
            {
                enforce: 'pre',
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                include: [path.join(__dirname, './src', 'scripts')],
                loader: 'eslint-loader'
            },
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    loader: 'css-loader?sourceMap!less-loader?sourceMap'
                })
            },
            {
                test: /\.(eot|woff|woff2|ttf|otf|png|jpg)$/,
                loader: 'file-loader?name=images/[name].[ext]'
            }
        ]
    },
    devServer: {
        port: 8080,
        stats: 'errors-only',
        proxy: {
            '/api': {
                target: 'http://localhost:20404', //http://localhost:20403/',
                secure: false
            }
        },
        historyApiFallback: {
            index: 'debug.html'
        }
    },
    plugins: [
        new ExtractTextPlugin({
            filename: './styles/main.css',
            allChunks: true
        })
    ],
    resolve: {
        modules: ['src/scripts', 'node_modules'],
        extensions: ['.jsx', '.js'],
        unsafeCache: true,
        alias: {
            components: path.resolve(__dirname, 'src', 'scripts', 'components'),
            routes: path.resolve(__dirname, '.', 'routes'),
            draggable_tab: path.resolve(__dirname, 'src', 'scripts', 'lib'),
            utils: path.resolve(__dirname, 'src', 'scripts', 'utils'),
            engine: path.resolve(__dirname, 'src', 'scripts', 'engine')
        }
    }
};