使用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和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。
希望這篇文章能夠幫到你，有什麽問題可以評論，我們一起討論
使用webpack配置react並添加到flask應用