當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

使用webpack配置react并添加到flask应用

發(fā)布時間：2023/12/20 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了使用webpack配置react并添加到flask应用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

　　學習react，配置是很痛苦的一關，雖然現在有了create-react-app這樣方便的工具，但是必須要自己配置一遍，才能更好地進行項目開發(fā)。

　　首先要明確一個概念：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兩項的區(qū)別是：devDependencies中的插件只用于開發(fā)環(huán)境（development）而不用于生產環(huán)境（production），如何在運行的時候指定開發(fā)環(huán)境或生產環(huán)境我們之后會提到。

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:''//靜態(tài)資源文件引用時的路徑，在瀏覽器中的引用變?yōu)?#39;public/app.hash.js'。不太理解 },module:{rules:[//rules里可以配很多l(xiāng)oader {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展示內容。達到的效果就是可以在編輯保存文件后，不用手動執(zhí)行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節(jié)點的，但是我們用html-webpack-plugin自動生成的文件是不會生成一個root節(jié)點的，因此就需要給它一個模版html，里面包含root節(jié)點。如果你問為什么不直接掛在body上，因為掛在body上編譯的時候會一直有個warning，很煩，所以我就聽它的掛在節(jié)點上啦。

　　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進行打包或者運行開發(fā)服務器了

"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=... 可以設置命令執(zhí)行在開發(fā)環(huán)境還是生產環(huán)境。rimraf是一個可以刪除文件的工具庫，我們也把它裝上先，它可以幫我們在每一次build之前先把之前生成過的打包文件刪除。

8、測試一下

　　打包：

npm run build

　　運行開發(fā)服務器

npm run dev

9、將打包的js文件引入到flask應用

　　在項目根目錄創(chuàng)建run.py文件，加上一個最簡單的路由：

@app.route('/') def index():return render_template('1.html')

　　再創(chuàng)建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中相應的內容。反正開發(fā)的時候用webpack-dev-server，測試好了再build。

轉載于:https://www.cnblogs.com/luozx207/p/9739834.html

總結

以上是生活随笔為你收集整理的使用webpack配置react并添加到flask应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。