Spring集成React用来开发前端----maven项目中用webpack打包react相关组件

最新推荐文章于 2024-05-03 19:14:26 发布

Frank Lin

最新推荐文章于 2024-05-03 19:14:26 发布

阅读量2w

点赞数 2

分类专栏：前端框架前端开发 spring-rest 文章标签： spring react 集成

本文链接：https://blog.csdn.net/linfujian1999/article/details/72639194

版权

前端开发同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端框架

2 篇文章 0 订阅

订阅专栏

spring-rest

1 篇文章 0 订阅

订阅专栏

实时开发测试环境的搭建参考我的另一篇博文
Spring集成React用来开发前端----SpringMVC + react 开发实时测试

之前的文章主要介绍了react及如果使用，但是在spring开发中可能需要集成react到开发环境中，这里mark一下：

主要参考spring+react ，其中的rest没有涉及。spring官网上主要是springBoot集成react，其实官网的reference要讲的更好，习惯阅读英文文献的童鞋可以自己去看，其中的frontend-maven-plugin是如何导入到spring project以及webpack的配置一笔带过，这里详细讲一下。

首先讲一下webpack，是一种web打包工具，可以将一系列相关联的文件打包成一份文件，这里就很有利用价值了（对于react），因为react是如下这种结构的：

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './components/Hello.js';

ReactDOM.render(
	<Hello />,
	document.getElementById('app')
);

1）react语法结构可以是JSX，因此需要babel来转换一下，（因此需要babel）
2）需要导入react及reactdom（需要这两个包）
3）以上的js最好最后打包成一个js（bundle.js）导入HTML起作用如下：（更需要打包工具webpack）

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>ReactJs + Spring Data REST</title>
</head>
<body>
	<div id="app"></div>
	
	<script src="../static/bundle.js"></script>
</body>
</html>

从上边来看，首先就需要在project里集成一个webpack了，so…
spring官网reference推荐用frontend-maven-plugin（上边提过），怎么集成可以去google上go一下，（顺便提一下百度真心不推荐使用，简直就是开发者的地狱，怪不得现在BAT被人叫做AT了…）。我也简单总结一下如何集成webpack：

maven管理：
pom.xml中:

<!-- webpack -->
			<plugin>
				<groupId>com.github.eirslett</groupId>
				<artifactId>frontend-maven-plugin</artifactId>
				<version>1.2</version>
				<configuration>
					<installDirectory>target</installDirectory>  <!-- 该插件的安装位置 -->
					<!-- webpack的工作目录，所有的配置文件/package.json/component/js及all所有和react有关的文件都在这个目录里存放 -->
					<workingDirectory>src/main/resources/js</workingDirectory> 
				</configuration>
				<executions>
					<execution>
						<id>install node and npm</id> <!-- webpack必须有node支持 -->
						<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> <!-- webpack build -->
						<goals>
							<goal>webpack</goal>
						</goals>
					</execution>
				</executions>
			</plugin>

如上的pom.xml可以暂时不更新（update maven project）

由于以上的webpack的工作目录是：src/main/resources/js 因此后续的文件都要添加到这个路径下：

js目录结构如下图：
这里写图片描述

首先添加package.json-------添加react依赖的包react/reactDom/babel等

{
  "name": "readinglist",
  "version": "0.1.0",
  "description": "SpringBoot + React ",
  "repository": {
    "type": "git",
    "url": "git@https://github.com/linfujian/readinglist.git"
  },
  "keywords": [
    "rest",
    "hateoas",
    "spring",
    "data",
    "react"
  ],
  "author": "fujian lin",
  "license": "Apache-2.0",
  "bugs": {
    "url": "https://github.com/spring-guides/tut-react-and-spring-data-rest/issues"
  },
  "homepage": "https://github.com/spring-guides/tut-react-and-spring-data-rest",
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "rest": "^1.3.1",
    "webpack": "^1.12.2"
  },
  "scripts": {
    "watch": "webpack --watch -d"
  },
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0"
  }
}

然后添加webpack的配置文件：webpack.config.js
该文件结构不是很熟，只了解个大概

var path = require('path');

module.exports = {
    entry: './app.js', //entry为入口文件，即webpack以这个文件为基础打包成另一个文件，所以entry文件包括了要导入的文件
    devtool: 'sourcemaps',
    cache: true,
    debug: true,
    output: { //打包输出出bundle.js文件，这个文件就可以导入HTML中了
        path: __dirname,
        filename: '../static/bundle.js'
    },
    module: {
        loaders: [
            {
                test: path.join(__dirname, '.'),
                exclude: /(node_modules)/,
                loader: 'babel', //用babel转换JSX
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

app.js入口文件

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './components/Hello.js';

ReactDOM.render(
	<Hello />,
	document.getElementById('app')
);

以上除了导入react/reactDom外，还要导入一个组件Hello
Hello.js

import React from 'react';

export default class Hello extends React.Component {
	render() {
		return <p>Hello, world!</p>;
	}
}

OK, 以上构建完毕后，命令行mvn install 即可在static目录下生成一个bundle.js文件了：
我是在window下生成的，首先将你的maven目录下的bin目录添加到环境变量中…实在不知道就去google添加环境变量吧
然后在window下cmd启动命令行，cd到你项目目录下运行 mvn install 即可

最后将生成的bundle.js导入到HTML页面（readingListReact.html）中

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>ReactJs + Spring Data REST</title>
</head>
<body>
	<div id="app"></div>
	
	<script src="../static/bundle.js"></script>
</body>
</html>

这样就集成完了，以后写页面的话就把需要webpack打包生成的bundle.js导入到HTML即可。当然你写react组件的话一定要在js目录下存放每次生成bundle时 mvn install一下

当然在实际开发中，不可能每改动一下react的相关js就执行一下mvn install这样效率太低，另一种方法是将webpack设置成watch模式，一旦改动了就会自动生成bundle.js，从而自动更新HTML中的结构及内容，操作方法如下：

之前pom.xml下将node和npm安装在了target目录下
为了在window的命令窗口下使用npm，将
D:\software\spring-tool-suite-3.8.3.RELEASE-e4.6.2-win32-x86_64\workspace\readinglist\target\node
以及D:\software\spring-tool-suite-3.8.3.RELEASE-e4.6.2-win32-x86_64\workspace\readinglist\target\node\node_modules\npm（及node.exe路径及npm路径添加到环境变量中）

然后在命令行中cd到js路径（D:\software\spring-tool-suite-3.8.3.RELEASE-e4.6.2-win32-x86_64\workspace\readinglist\src\main\resources\js 及workingDir）

然后执行 npm run-script watch

这样每次修改app.js以及Hello.js 都会自动生成新的bundle.js

Frank Lin

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
19
评论
Spring集成React用来开发前端----maven项目中用webpack打包react相关组件

实施开发环境的搭建参考我的另一篇博文 Spring集成React用来开发前端—-SpringMVC + react 开发实时测试之前的文章主要介绍了react及如果使用，但是在spring开发中可能需要集成react到开发环境中，这里mark一下：主要参考spring+react ，其中的rest没有涉及。spring官网上主要是springBoot集成react，其实官网的reference要
复制链接

扫一扫