前言
新的一年，開始水第一篇技術文。碰巧最近React玩得多，擼一篇文章紀念一下開發環境的搭建。🤔
原文：React+Flask打造前后端分離項目開發環境
- 開篇兩問：
- 什么是React？：React，用於構建用戶界面的 JavaScript 庫（官網復制粘貼，真香，不用怎么寫template了，舒服
- 什么是Flask？：一個使用Python編寫的輕量級Web應用框架。用來寫雲原生應用很香！
先看下最終的項目結構，如下：《項目源碼》
├── app.py
├── env
| ├── Include
| ├── Lib
| ├── LICENSE.txt
| ├── Scripts
| └── tcl
├── frontend
| ├── build
| ├── node_modules
| ├── package-lock.json
| ├── package.json
| ├── public
| ├── README.md
| └── src
├── static
| └── js
└── templates
└── index.html
開發環境：Windows+Flask+React+Git Bash+vscode
Backend-Flask
個人比較喜歡用CLI，So，項目開發依賴使用
virtualenv+pip管理，pipenv也還行，雖然lock package有點久。聽說比較新的poetry很香？
# 1、安裝virtualenv
pip install virtualenv
# 2、為項目（Flask_React）創建虛擬環境->env
virtualenv env
# 3、激活虛擬環境env
source env/Scripts/activate
# 4、安裝項目依賴
pip install -r requirments.txt
# 5、創建好templates和static目錄，用於存放React打包好的渲染模板和靜態文件
mkdir templates
mkdir static
后端服務的基礎環境搭建好了，隨手寫個路由，看下能不能用先
# app.py
from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
return "<h1>Hello React+Flask!</h1>"
if __name__ == '__main__':
app.run('127.0.0.1', port=5000, debug=True)
Frontend-React
前端React應用的開發環境使用官方提供的腳手架create-react-app搭建。
# 1、安裝腳手架
npm install -g create-react-app
# 2、為Flask_React項目創建React App->frontend
create-react-app frontend # 這里有點小久，喝杯咖啡☕摸下魚
OK，前端開發環境搭建好了，清理掉src目錄下的所有文件，自己寫個組件，如下：
cd frontend/src
rm -rf *
touch index.js
//index.js
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render() {
return (
<div className="container">
<h1 className="center-align">
盒裝一流弊<br/>
<span className="waves-effect waves-light btn">
<i className="material-icons right">cloud</i>您說的都對
</span>
</h1>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'))
OK，預覽下效果，順便調試（沒啥可調試的/(ㄒoㄒ)/~~）。npm start。效果如下：
沒多大問題的話，是時候打包寫好的React App給后端服務了。
Done
很舒服的是create-react-app封裝好了 Babel 和 webpack，我們可以直接使用npm run build打包寫好的App到frontend/build目錄中。然后手動將生成的文件分別挪到Flask的templates和static目錄中即可。等等？手動，能不能使用CLI，dang然闊以。
npm 允許我們在package.json文件里面，使用scripts字段自定義腳本命令。更舒服的是npm script提供了pre和post鈎子。我們可以給build腳本命令提供兩個鈎子prebuild和postbuild。編輯后的package.json文件的Script命令如下如下：
"scripts": {
"start": "react-scripts start",
"prebuild": "rm -rf ..\\templates\\index.html && rm -rf ..\\static",
"build": "react-scripts build",
"postbuild": "mv build\\index.html ..\\templates\\ && mv build\\static ..\\static",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
這時候，我們執行npm run build命令時，會自動按照下面的順序執行
rm -rf ..\\templates\\index.html && rm -rf ..\\static
react-scripts build
mv build\\index.html ..\\templates\\ && mv build\\static ..\\static
OK，我們試試。如下：
Nice，沒毛病。🎉🎉🎉。改下app.py:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html') # 渲染打包好的React App的頁面
if __name__ == '__main__':
app.run('127.0.0.1', port=5000, debug=True)
冇問題啊！收工！！！