Spring集成React用来开发前端----maven项目中用webpack打包react相关组件
2017-05-23 14:04
1186 查看
实时开发测试环境的搭建参考我的另一篇博文
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是如下这种结构的:
1)react语法结构可以是JSX,因此需要babel来转换一下,(因此需要babel)
2)需要导入react及reactdom(需要这两个包)
3)以上的js最好最后打包成一个js(bundle.js)导入HTML起作用如下:(更需要打包工具webpack)
从上边来看,首先就需要在project里集成一个webpack了,so…….
spring官网reference推荐用frontend-maven-plugin(上边提过),怎么集成可以去google上go一下,(顺便提一下百度真心不推荐使用,简直就是开发者的地狱,怪不得现在BAT被人叫做AT了…..)。我也简单总结一下如何集成webpack:
maven管理:
pom.xml中:
如上的pom.xml可以暂时不更新(update maven project)
由于以上的webpack的工作目录是:src/main/resources/js 因此后续的文件都要添加到这个路径下:
js目录结构如下图:
首先添加package.json——-添加react依赖的包react/reactDom/babel等
然后添加webpack的配置文件:webpack.config.js
该文件结构不是很熟,只了解个大概
app.js入口文件
以上除了导入react/reactDom外,还要导入一个组件Hello
Hello.js
OK, 以上构建完毕后,命令行mvn install 即可在static目录下生成一个bundle.js文件了:
我是在window下生成的,首先将你的maven目录下的bin目录添加到环境变量中…….实在不知道就去google添加环境变量吧
然后在window下cmd启动命令行,cd到你项目目录下 运行 mvn install 即可
最后将生成的bundle.js导入到HTML页面(readingListReact.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
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
相关文章推荐
- Shiro权限控制框架 ---SpringMVC+Spring+My batis+Mysql+Maven集成开发Web项目
- Spring集成React用来开发前端----SpringMVC + react 开发实时测试
- 【持久化框架】SpringMVC+Spring4+Mybatis3集成,开发简单Web项目
- webpack 打包一个简单react组件
- maven 项目(四) spring集成springMVC开发统一接入API(准备工作:第一部分)
- 【持久化框架】SpringMVC+Spring4+Mybatis3集成,开发简单Web项目
- Spring Boot集成MyBatis开发Web项目
- 这本小书的目的是引导你进入 React 和 Webpack 的世界。他们两个都是非常有用的技术,如果同时使用他们,前端开发会更加有趣。
- SpringMVC+Spring4+Mybatis3集成,开发简单Web项目
- SpringMVC+Spring4+Mybatis3集成,开发简单Web项目+源码下载
- 详解 集成Maven Spring Mybatis项目打包生成Bat文件
- maven 项目(五) spring集成springMVC开发统一接入API--实现test接口
- 【持久化框架】SpringMVC+Spring4+Mybatis3集成,开发简单Web项目+源码下载
- Maven管理的Spring Web项目集成JUnit单元测试
- SpringMVC+Spring4+Mybatis3集成,开发简单Web项目+源码下载
- webpack 打包一个简单react组件
- 【持久化框架】SpringMVC+Spring4+Mybatis3集成,开发简单Web项目+源码下载
- SpringMVC+Spring4+Mybatis3集成,开发简单Web项目
- 【持久化框架】SpringMVC+Spring4+Mybatis3集成,开发简单Web项目+源码下载
- 【持久化框架】SpringMVC+Spring4+Mybatis3集成,开发简单Web项目+源码下载