【譯】一個小時搭建一個全棧Web應用框架（上）

時間 2019-12-06

標籤一個小時搭建 web 應用框架欄目 HTML 简体版

原文原文鏈接

翻譯：瘋狂的技術宅
英文標題：Creating a full-stack web application with Python, NPM, Webpack and React
英文原文：https://codeburst.io/creating...
本文首發微信公衆號：充實的腦洞。轉載需註明出處！javascript

把想法變爲現實的能力是空想家與實幹家的區別。無論你是在一家跨國公司工做，仍是正在爲本身的創業公司而努力，那些有能力將創意轉化爲真正產品的人，都具備寶貴的技能並擁有明顯的實力。若是你能在不到一個小時的時間裏建立一個全棧的Web應用，那麼你就有能力爲本身下一個偉大的想法迅速的的建立一個簡單的MVP，或者在工做中快速構建一個新的應用程序。css

本文介紹了建立一個簡單的全棧Web應用所需的步驟，其中包括一個Python服務器和一個React前端。你能夠輕鬆的在其基礎上進行構建，根據你的實際需求進行修改，或是添加一些其餘技術特性，例如Redux。html

世界在互聯網的驅動下，計算機的基本技術和簡單工具已經成爲現代商業人士的必備技能。本文適合想要學習怎樣製做一個簡單的基於web的應用程序，而且具有基本編程技能的人。前端

儘管你能夠在個人GitHub上找到本文全部的源代碼，可是若是你可以從頭開始建立這個程序，將會獲得最好的學習成果。java

初始項目設置

.
├── README.md
└── fullstack_template/
    ├── server/
    └── static/
        ├── css/
        ├── dist/
        ├── images/
        └── js/

咱們將使用npm包管理器來處理Javascript依賴項。Npm是很是棒的，由於它易於使用，有良好的文檔支持，有將近50萬個包可供使用，以及合理的默認項目設置方案。node

使用包管理器可使您的項目依賴項保持最新狀態，並可以獲取和安裝最新的包。python

讓咱們初始化項目：react

$ cd fullstack_template/static
$ npm init

在初始化的過程當中能夠接受默認設置，可是你最好填寫本身的程序名稱和Git庫等參數，結束後會自動在你的static目錄下生成一個名爲package.json 的文件。webpack

package.json文件有以下幾個做用：git

跟蹤全部的依賴項及其版本。
它但是使其餘開發人員瞭解你的項目，好比應用的名稱、說明、全部者和所在存儲庫的位置。
能夠很是容易的經過npm進行自動化安裝、運行和更新。

安裝和配置Webpack

Webpack是一個模塊打包器。它能夠處理你全部的模塊依賴，並生成靜態資源。使用模塊打包器能夠減小瀏覽器須要加載的模塊數量，從而大大縮短了網頁的加載時間。

演示了Webpack是怎樣工做的

安裝Webpack：

$ npm i webpack --save-dev

要使用Webpack，咱們須要添加一個 Webpack 配置文件。這個配置告訴 Webpack 在哪裏能夠找到 JavaScript 和 React 文件，以及在哪裏放置生成的JavaScript包。

在static目錄中添加一個名爲webpack.config.js的文件，下面的內容以下:

const webpack = require('webpack');
const config = {
    entry:  __dirname + '/js/index.jsx',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js',
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css']
    },
};
module.exports = config;

添加運行命令

向package.json文件中添加一些運行命令會是你的開發過程更加順暢。我老是在本身的package.json 文件中添加一些build, dev-build 和 watch 命令。

build用於構建生產環境版本, dev-build用於開發時的構建版本，watch的做用和dev-build相似，只不過能夠自動監視項目文件是否修改，而且自動從新構建被修改的部分，你只須要刷新瀏覽器就能夠看到改動後的結果。

自動化構建你的項目還有一個好處，那就是你不會耗費時間去思考爲何修改了代碼卻看不到效果，通常遇到這種狀況純粹是由於你忘記了構建它們！

如下是個人 package.json 文件內容：

{
  "name": "FullStackTemplate",
  "version": "1.0.0",
  "description": "A Template for creating a Full Stack Web Application using Python, NPM, Webpack and React",
  "main": "index.js",
  "scripts": {
    "build": "webpack -p --progress --config webpack.config.js",
    "dev-build": "webpack --progress -d --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --progress -d --config webpack.config.js --watch"
  },
  "keywords": [
    "fullstack",
    "template",
    "python",
    "react",
    "npm",
    "webpack"
  ],
  "author": "Angela Branaes",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^3.0.0"
  }
}

添加Babel支持

Babel可以容許咱們使用最新的JavaScript特性編碼，即使是瀏覽器尚未支持它們。經過安裝ES2015和react presets，Babel可以把使用 Javascript 新特性和 React jsx 的代碼轉換爲與當前瀏覽器兼容的 JavaScript 語法。

Babel轉換JavaScript代碼的示例

安裝Babel：

$ npm i babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

添加Babel presets到package.json文件中：

"babel": {
  "presets": [
    "es2015",
    "react"
  ]
},

在 Webpack 的配置中添加一條 babel-loader 規則。注意，咱們在規則中排除了node_modules。這能夠保證 Babel 不會嘗不會對 node 模塊進行轉換，從而不會影響到node程序的加載速度。

module: {
  rules: [
    {
      test: /\.jsx?/,
      exclude: /node_modules/,
      use: 'babel-loader'
    }
  ]
}

建立 index.jsx 和 index.html

爲了能在瀏覽器中看到一些東西，咱們將建立一個簡單的index.html頁面，這個頁面只顯示一個由JavaScript彈出的「Hello World!」對話框，以此來證實設置是正確的。

在static目錄中建立一個index.html文件，並填寫下面的代碼：

<!— index.html —>
<html>
  <head>
    <meta charset="utf-8">
    <!-- Latest compiled and minified bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <title>Creating a Full-Stack Python Application with NPM, React.js and Webpack</title>
  </head>
  <body>
    <div id="content" />
    <script src="dist/bundle.js" type="text/javascript"></script>
  </body>
</html>

在static/js目錄下建立一個index.jsx文件，並添加下面的代碼：

alert(「Hello World!」);

啓動一個獨立的終端窗口來運行前面建立的 Webpack watch 命令，這樣當咱們在工做時，它能夠在後臺一直運行。它會在沒有編碼錯誤的前提下自動構建你的包。

$ npm run watch

打開瀏覽器並訪問index.html，應該可以看到彈出一個寫着「Hello World!」的提示窗口。

建立一個簡單的 React 應用

首先須要安裝React：

$ npm i react react-dom --save-dev

下一步讓咱們用一個簡單的 React 應用替換掉前面的index.jsx，並讓它加載一個建立在單獨的 App.js 文件中的 React 類。

// index.jsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("content"));

React 類須要在不一樣的React源碼文件中作導出，以方便後面的使用。一般每一個文件中只寫一個類，而且導出。

// App.jsx
import React from 「react」;
export default class App extends React.Component {
  render () {
    return <p> Hello React!</p>;
  }
}

若是咱們如今刷新瀏覽器，頁面上將會顯示「Hello React!」，而再也不是「Hello World!」提示框。

配置Python服務

關於Python服務器咱們將會使用Flask。Flask是小型Python應用的最佳選擇之一。「微框架（microframework）」可使你在短短几分鐘內輕鬆快速的使一個服務跑起來。對於大型應用和某些專業領域，企業一般會使用 Pyramid 或 Django。若是你想在本身的環境中擁有很大的靈活性和可以自定義配置的特性，Pyramid是一個不錯的選擇。Django則提供了一個全功能的Web框架，同時使你沒必要爲應用的配置花費太多的時間，好比在數據庫配置等方面。

建立一個新的virtualenv並安裝Flask

在server目錄中建立Flask服務源碼文件，添加一個用來返回返回「Hello World!」的端點路由「/hello」，再添加一個主頁面端點路由「/「用來渲染index.html 模版。

# server.py
from flask import Flask, render_template

app = Flask(__name__, static_folder="../static/dist", template_folder="../static")

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

@app.route("/hello")
def hello():
    return "Hello World!」

if __name__ == "__main__":
app.run()

運行python服務：