使用webpack配置react并添加到flask应用
学习react,配置是很痛苦的一关,虽然现在有了create-react-app这样方便的工具,但是必须要自己配置一遍,才能更好地进行项目开发。
首先要明确一个概念:react的文件必须经过编译才能被浏览器识别,因此我们需要webpack这个打包工具来把react的组件打包成一个js文件,然后将这个js文件放到flask目录下,然后引入到flask模版的html文件里面。当然,你也可以在前端用express等服务进行客户端渲染,只将flask服务视为一个传递数据的api。
下面开始配置吧
1、如果你的电脑没有安装node.js,先装node.js
brew install node 或者yarn install node
然后查看node和npm的版本检查安装情况,npm是node自带的安装工具
node -v npm -v
2、npm安装的时候有可能很慢,最好把资源换成淘宝的
npm config set registry https://registry.npm.taobao.org
验证配置是否成功
npm config get registry
3、新建一个空的文件夹作为项目根目录,在项目根目录
npm init
接下来要填的东西按需求填写,也可以之后在package.json中修改
现在根目录多了一个文件package.json,这个是npm的配置文件。之后我们会在这个文件里定义一些npm的脚本。
4、因为我们的项目需要用到webpack和react,先装上
npm install -s webpack npm install -s react
-s表示会把这个包连同版本号写到package.json的dependencies中,如果加上-d就会把这个包写到devDependencies。package.json中的dependencies与devDependencies两项的区别是:devDependencies中的插件只用于开发环境(development)而不用于生产环境(production),如何在运行的时候指定开发环境或生产环境我们之后会提到。
5、在项目根目录新建一个名为webpack.config.js的文件,这个文件用于配置webpack
const path= require('path')//引用path包。在node_modules中 const HTMLPlugin=require('html-webpack-plugin') module.exports={entry:{app:path.join(__dirname,'/client/main.js')//main.js作为打包的入口,根据main中的依赖关系整体打包 },output:{//打包后的输出filename:'[name].[hash].js',//打包后输出的文件名。name就是entry中入口文件的名字,这里是app。//webpack会根据打包的文件内容计算hash,当文件内容有变动的时候hash值才会变化//这样的话,没有文件改动的时候不会刷新浏览器缓存path:path.join(__dirname,'/static'),//输出路径publicPath:''//静态资源文件引用时的路径,在浏览器中的引用变为'public/app.hash.js'。不太理解 },module:{rules:[//rules里可以配很多loader {test: /\.jsx?$/,//如何识别jsx类型的文件loader:'babel-loader'//babel可以将最新js语法编译到低版本 }]},plugins:[new HTMLPlugin({template:path.join(__dirname,'/client/template.html')//html模版 })],devServer:{port:'8888',contentBase:path.join(__dirname,'/static'),//对应打包后输出的path overlay:{errors:true//获取到的错误信息会在页面上显示 }} }
这样配置的话需要装很多依赖库。首先装上html-webpack-plugin,这是一个可以在webpack输出目录生成一个html页面,同时将打包好的js文件引入页面。如果我们要用webpack-dev-server,这个库必须要装。
然后装上webpack-dev-server,这个服务启动后,访问本机对应的端口就可以看到项目的效果,当你对文件有任何修改时,它会自动编译出js文件与html文件存在内存中,然后调用这些文件渲染出html展示内容。达到的效果就是可以在编辑保存文件后,不用手动执行build,刷新一下页面就可以看到修改后的内容
然后是babel-loader这个库,这个库的作用是将react特有的jsx语言翻译成浏览器可以识别的js语言。装了它之后还要装很多其他的库,之前看教程装了babel-core等库都运行不成功,说版本太旧,所以正确的姿势是装上@babel/core、@babel/preset-react、@babel/preset-env这三个库,然后在根目录新建一个名为.bablerc的babel配置文件,内容是
{ "presets": ["@babel/preset-env","@babel/preset-react"] }
6、我们开始写一个可以打包的包含react组件的js文件
在项目根目录新建如webpack配置所述的打包入口文件,内容为
import React from 'react'; import ReactDOM from 'react-dom';class Clock extends React.Component {constructor(props) {super(props);this.state = {opacity: 1.0,date:new Date()//new Date()时会获取新的时间 }}componentDidMount() {this.timer = setInterval(function () {var opacity = this.state.opacity;opacity -= .1;if (opacity <= 0) {opacity = 1.0;this.setState({date:new Date()});}this.setState({opacity: opacity});}.bind(this), 100);}render() {return (<div><h1>MyClock</h1><h2 style={{opacity: this.state.opacity}}>{this.state.date.toLocaleTimeString()}</h2></div>); //记得要加toLocaleTimeString,报错卡我了20分钟 } }ReactDOM.render(<Clock />,document.getElementById('root'))
这是一个简单的时钟组件,要注意的是最后返回的时候这个组件是挂在root节点的,但是我们用html-webpack-plugin自动生成的文件是不会生成一个root节点的,因此就需要给它一个模版html,里面包含root节点。如果你问为什么不直接挂在body上,因为挂在body上编译的时候会一直有个warning,很烦,所以我就听它的挂在节点上啦。
html模版如下
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>Webpack App</title></head><body><div id="root"></div></body> </html>
7、该配置的配置了,需要打包的文件也写好了。现在我们到package.json里写一下npm脚本,然后就可以用npm进行打包或者运行开发服务器了
"scripts": {"build": "rimraf static && webpack --mode=production --config webpack.config.js","dev": "webpack-dev-server --mode=development --config webpack.config.js"},
build是打包命令,dev是运行webpack-dev-server。用 --mode=... 可以设置命令执行在开发环境还是生产环境。rimraf是一个可以删除文件的工具库,我们也把它装上先,它可以帮我们在每一次build之前先把之前生成过的打包文件删除。
8、测试一下
打包:
npm run build
运行开发服务器
npm run dev
9、将打包的js文件引入到flask应用
在项目根目录创建run.py文件,加上一个最简单的路由:
@app.route('/') def index():return render_template('1.html')
再创建templates文件夹和该文件夹下的1.html文件,文件内容如下
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>Chat</title> </head> <body><div id="root"></div><script type="text/javascript" src="{{ url_for('static', filename='app.16d576b97de33ccfcd4f.js') }}"></script> </body> </html>
然后运行run.py文件,就可以通过访问flask应用的端口来获取我们写的前端应用了。
这么做就免去了配置前端服务器和配置nginx反向代理的过程,响应速度我个人感觉也不会太慢,但是build之后如果js文件名变化要改1.html中相应的内容。反正开发的时候用webpack-dev-server,测试好了再build。
转载于:https://www.cnblogs.com/luozx207/p/9739834.html
使用webpack配置react并添加到flask应用相关推荐
- webpack 配置react脚手架(四):路由配置
1. 由于 react-router 是集成了 react-router-dom 和 react-router-native的一起的,所以这里要使用的是 react-router-dom, 2. 安装 ...
- 教你webpack、react和node.js环境配置(上篇)
很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node ...
- 不暴露 create react app 的webpack配置下,修改webpack配置
使用 react-app-rewired react-app-rewired 传送门 安装 react-app-rewired npm install react-app-rewired --save ...
- react修改webpack配置,添加别名
第一种方式 通过 npm run eject 直接暴露出来react所有的webpack配置文件,暴露出来之后,过程不可逆 而且失去了 react-scripts 的统一管理的好处,而且react的w ...
- Flask + Nginx + React + Webpack 配置解决跨域问题
用 Flask 做后端开发单页应用,webpack-dev-server 生成静态文件在http://localhost:8080 下,Flask 页面在 http://localhost:5000 ...
- 配置React的Babel 6和Webpack 2环境
Facebook的一帮子工程师在忙碌之余开发除了一套前段UI框架React.这个框架最大的有点就在于让UI的开发都基于组件,这样View都是根据props和state变化的. 项目地址:https:/ ...
- react 引用本地js_从零配置webpack 4+react脚手架(二)
前言: 你可能也注意到了,html文件中的关于js的引用是我们手动写的,那假如我们改了输出路径或打包编译之后的文件名,那我们岂不是还要手动去修改html文件中的引用?我们怎么做到,像create-re ...
- react 文件 md5_从零配置webpack 4+react脚手架(二)
前言: 你可能也注意到了,html文件中的关于js的引用是我们手动写的,那假如我们改了输出路径或打包编译之后的文件名,那我们岂不是还要手动去修改html文件中的引用?我们怎么做到,像create-re ...
- 修改webpack配置,在react中使用less
LESS是一个CSS预处理器,比如antD就是基于LESS的. 要在react中使用LESS,需要暴露webpack配置并进行修改,同时安装less和less-loader. 当然网上可以找到很多教程 ...
最新文章
- 链表的排序(Python和C实现)
- 淡谈泛型约束T(转)
- 一个插排引发的设计思想 (一) 观察者模式
- dijkstra算法优化
- VTK:PolyData之DownsamplePointCloud
- oFono安装和启动
- sparksql整合hive
- 程序员的年龄越大编程能力越弱???原来我们都理解错了
- 2015.10.13课堂
- 基于51单片机的音乐播放器
- 在固态硬盘上安装win7后没有声音
- (实测可用)GD32F303RCT6开发板移植RT-Thread操作系统(添加RTC时钟线程驱动DS1302时钟)
- mysql vs0215_0215 docker环境
- word分栏对齐方法
- TOJ 5138: 数字游戏
- Java中equal和==的比较[zz]
- python基础教程 ppt_Python基础教程第2章ppt
- typecho插件编写教程7 - Helper类
- 【Android】虚拟环绕声
- 什么是内存屏障?具有什么作用?
热门文章
- C++新手之详细介绍MFC
- Shell的 for 循环小例子
- 用eclipse配置spket编写extjs代码方法
- 一个莫名的人,竞标,教训,韩国女人
- [转载]Manually configuring Microsoft Internet Information Services (IIS)
- 卡巴斯基:风险无国界 网络安全从业者要与小网民保持一致
- TurboMail手机客户端—强大的附件文档阅读能力
- 比tween更有效的tween包.
- 顺序存储结构和链式存储结构的优缺点
- android 增加触摸范围,android seekBar 增加点击和滑动范围