使用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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/464785.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

POJ 2976 Dropping Tests

http://poj.org/problem?id2976 题目大意&#xff1a;给定n个二元组(a,b)&#xff0c;扔掉k个二元组&#xff0c;使得剩下的 最大。 这两天一直在搞分数规划&#xff0c;有了前两道题&#xff08;3621、2728&#xff09;&#xff0c;这道题就是完完全全的大水题了。 设 r100…

回调函数这个是什么鬼?

这是一个同学在微信给我提问的问题。要搞清楚回调函数&#xff0c;我们首先要搞清楚函数&#xff0c;函数其实就是一个地址&#xff0c;这个地址描述了这个函数在内存中的位置。但是函数和变量也是一样的&#xff0c;有类型&#xff0c;对变量来说&#xff0c;变量会分成各种类…

一个整数转换成字符串(C/C++自己写的算法)

自己写的一个算法&#xff1a;将一个int型数转换为string char *itoa(int num, char *str){assert(NULL ! str);int i1, j0;if (num < 0){str[j]-;num (-1)*num;}if (0 num){str[j] 0;str[j] \0;return str; }while (! (num/i < 10)){i i*10;}while (num > 0){st…

mysql模糊查询与预编译_mysql预编译模糊查询恶心了我一天的时间,终于弄好了。但是还有一点不明白。如下:...

不用这么麻烦&#xff0c;你可以定义个boolean的变量&#xff0c;用来记录传参是不是description&#xff0c;如果是&#xff0c;在paramList的循环里做模糊拼接&#xff0c;不是&#xff0c;就不用boolean descFlagfalse; //标记传来的参数是否为description&#xff0c;为后面…

小米12比我的小米10还便宜

昨天晚上&#xff0c;小米发布会发布了新的小米12手机&#xff0c;价格很亲民&#xff0c;比我两年前买的小米10还便宜。这还不算&#xff0c;小米12比小米10还更好看。小米在尝试曲面屏之后&#xff0c;终于觉得曲面屏不再是一个可以用来炫耀的卖点了。我自己的小米10曲面屏&a…

庆祝51CTO六周年:资源牛人有奖比拼,生日当天疯狂送豆!(已结束)

2011年8月15日&#xff0c;是51CTO成立6周年的日子。为庆祝这一盛典&#xff0c;特推出此活动。一、活动时间&#xff1a;2011年8月5日——2011年8月25日 24:00二、活动奖项及规则&#xff1a;1、资源牛人金奖&#xff1a;入围资源牛人排行榜前十名的Down友已经产生&#xff0c…

Centos7:mysql5.6安装,配置及使用(RPM方式)

1.首先安装好jdk环境,本机所用环境为jdk1.8 2.卸载MariaDB(Centos7自带)与Mysql 2.1卸载:MariaDB #rpm -qa | grep -i mariadb //查询安装的MariaDB#rpm -e --nodeps 查到软件名 //卸载相关MariaDB的所有软件#find / -name mariadb#whereis mariadb //查找是否有相关配置目录及…

判断一个单链表中是否存在环

#判断一个单链表中是否存在 环。 #设置两个指针(fast, slow)&#xff0c;初始值都指向头&#xff0c;slow每次前进1步&#xff0c;fast每次前进2步&#xff0c; 大概的思路如下&#xff1a; 如果链表存在环&#xff0c;则fast必定先进入环&#xff0c;而slow后进入环&#xff…

mysql3.5 所有表_mysql学习笔记3.5

紧接着笔记3的训练介绍一个对于我来说的比较难的难点&#xff01;&#xff01;&#xff01;&#xff01;select * from sc;select student.sno,sname,avg(grade) as平均分fromstudent,scwhere student.snosc.snogroup bystudent.snohaving avg(grade)>90/*这一个条件我竟然忘…

CPU上电后加载程序的流程 | 基于RK3399

芯片上电解复位之后执行的第一段程序&#xff0c;在芯片中称之为Bootrom loader。这部分程序在芯片制造过程中固化到其内部的ROM空间&#xff0c;具备只读属性&#xff0c;在实际使用过程中无法修改这部分内容&#xff0c;这部分程序的知识产权也仅归属于芯片公司所有。其实&am…

IPv6与IPv4的区别

Technorati 标签: Hank--network porter■第一个就不说哈&#xff0c;32bit直接升级到128bit了。 从2的32次方升级到2的128次方了&#xff0c;地球上的每一粒沙子都可以分到一个IP地址。这个是IPv6最拉风的地方. ■在IPv6中&#xff0c;路由器不能用自动配置机制来配置接口&…

前端安全系列(一):如何防止XSS攻击?

前端安全 随着互联网的高速发展&#xff0c;信息安全问题已经成为企业最为关注的焦点之一&#xff0c;而前端又是引发企业安全问题的高危据点。在移动互联网时代&#xff0c;前端人员除了传统的 XSS、CSRF 等安全问题之外&#xff0c;又时常遭遇网络劫持、非法调用 Hybrid API …

判断一个链表是否为循环单链表

判断一个链表是否为循环单链表&#xff1a; #设置两个指针(fast, slow)&#xff0c;slow步长为1&#xff0c;fast步长为2&#xff0c; 大概的思路如下&#xff1a; 如果链表为循环单链表&#xff0c;则fast与slow必定相遇。 如果链表不为循环单链表&#xff0c;则fast必定先指…

在腾讯的这半年

晚上和同事聚餐后&#xff0c;我和李总坐车回公司&#xff0c;李总在电话里面和大家开会&#xff0c;然后说着各种让大家帮忙的话&#xff0c;我看着窗外密密麻麻的车辆——想着&#xff0c;这一年又要过去了。我是有总结的习惯的&#xff0c;不管是做事情还是生活&#xff0c;…

mysql数据删除后无法恢复数据恢复_Mysql数据库delete删除后数据恢复报告

原标题&#xff1a;Mysql数据库delete删除后数据恢复报告数据库环境部署与故障原因&#xff1a;本次恢复的数据库安装在客户本地服务器上&#xff0c;服务器操作系统为windows2008 r2 。在当前环境内安装有mysql5.6单实例&#xff0c;引擎类型为innodb&#xff0c;表内数据存储…

HDU 下沙的沙子有几粒

题目网址&#xff1a; http://acm.hdu.edu.cn/game/entry/problem/show.php?chapterid2&sectionid3&problemid9 分析&#xff0c;这题其实是H和D的组合排列问题&#xff0c;只不过要考虑期间累计的H和D的数量关系。 用DP来做&#xff0c;可以推导出&#xff1a; dp…

一个单向链表,输出该链表中倒数第k个结点,链表的倒数第0个结点为链表的尾指针

输入一个单向链表&#xff0c;输出该链表中倒数第k个结点。链表的倒数第0个结点为链表的尾指针 typedef struct _node_t {struct _node_t *next;int data; }Node;Node *list_k_node(Node * head, int k) {Node *phead, *pkhead;if (NULL head || (0 > k)){return NULL;}fo…

Linux之yum安装lamp环境

参照链接: http://www.jb51.net/os/RedHat/9939.html http://pjhfjy.blog.163.com/blog/static/47876996200963025757122/ http://oldleader.blog.163.com/blog/static/170861343201102085947386/ http://arqiang86.blog.163.com/blog/static/1092594200871211548121/

倒计时跳转页面

<h3>目标&#xff1a;百度<span idt></span></h3> <script>var i5;var tdocument.getElementById(t);t.innerHTML i秒后跳转;setInterval(function () {t.innerHTML--i秒后跳转;if(i0){location.hrefbaidu.com}},1000) </script> 转载于:h…