摘要：初始項(xiàng)目設(shè)置我們將使用包管理器來(lái)處理依賴項(xiàng)。使用包管理器可以使您的項(xiàng)目依賴項(xiàng)保持最新?tīng)顟B(tài)，并能夠獲取和安裝最新的包。是小型應(yīng)用的最佳選擇之一。

翻譯：瘋狂的技術(shù)宅
英文標(biāo)題：Creating a full-stack web application with Python, NPM, Webpack and React
英文原文：https://codeburst.io/creating...
本文首發(fā)微信公眾號(hào)：充實(shí)的腦洞 。轉(zhuǎn)載需注明出處！

把想法變?yōu)楝F(xiàn)實(shí)的能力是空想家與實(shí)干家的區(qū)別。不管你是在一家跨國(guó)公司工作，還是正在為自己的創(chuàng)業(yè)公司而努力，那些有能力將創(chuàng)意轉(zhuǎn)化為真正產(chǎn)品的人，都具有寶貴的技能并擁有明顯的實(shí)力。如果你能在不到一個(gè)小時(shí)的時(shí)間里創(chuàng)建一個(gè)全棧的Web應(yīng)用，那么你就有能力為自己下一個(gè)偉大的想法迅速的的創(chuàng)建一個(gè)簡(jiǎn)單的MVP，或者在工作中快速構(gòu)建一個(gè)新的應(yīng)用程序。

本文介紹了創(chuàng)建一個(gè)簡(jiǎn)單的全棧Web應(yīng)用所需的步驟，其中包括一個(gè)Python服務(wù)器和一個(gè)React前端。你可以輕松的在其基礎(chǔ)上進(jìn)行構(gòu)建，根據(jù)你的實(shí)際需求進(jìn)行修改，或是添加一些其他技術(shù)特性，例如Redux。

世界在互聯(lián)網(wǎng)的驅(qū)動(dòng)下，計(jì)算機(jī)的基本技術(shù)和簡(jiǎn)單工具已經(jīng)成為現(xiàn)代商業(yè)人士的必備技能。本文適合想要學(xué)習(xí)怎樣制作一個(gè)簡(jiǎn)單的基于web的應(yīng)用程序，并且具備基本編程技能的人。

盡管你可以在我的GitHub上找到本文所有的源代碼，但是如果你能夠從頭開(kāi)始創(chuàng)建這個(gè)程序，將會(huì)得到最好的學(xué)習(xí)成果。

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

我們將使用npm包管理器來(lái)處理Javascript依賴項(xiàng)。Npm是非常棒的，因?yàn)樗子谑褂?，有良好的文檔支持，有將近50萬(wàn)個(gè)包可供使用，以及合理的默認(rèn)項(xiàng)目設(shè)置方案。

使用包管理器可以使您的項(xiàng)目依賴項(xiàng)保持最新?tīng)顟B(tài)，并能夠獲取和安裝最新的包。

讓我們初始化項(xiàng)目：

$ cd fullstack_template/static
$ npm init

在初始化的過(guò)程中可以接受默認(rèn)設(shè)置，但是你最好填寫自己的程序名稱和Git庫(kù)等參數(shù)，結(jié)束后會(huì)自動(dòng)在你的static目錄下生成一個(gè)名為package.json 的文件。

package.json文件有如下幾個(gè)作用：

跟蹤所有的依賴項(xiàng)及其版本。

它可是使其他開(kāi)發(fā)人員了解你的項(xiàng)目，比如應(yīng)用的名稱、說(shuō)明、所有者和所在存儲(chǔ)庫(kù)的位置。

可以非常容易的通過(guò)npm進(jìn)行自動(dòng)化安裝、運(yùn)行和更新。

Webpack是一個(gè)模塊打包器。它可以處理你所有的模塊依賴，并生成靜態(tài)資源。 使用模塊打包器可以減少瀏覽器需要加載的模塊數(shù)量，從而大大縮短了網(wǎng)頁(yè)的加載時(shí)間。

演示了Webpack是怎樣工作的

安裝Webpack：

$ npm i webpack --save-dev

要使用Webpack，我們需要添加一個(gè) Webpack 配置文件。這個(gè)配置告訴 Webpack 在哪里可以找到 JavaScript 和 React 文件，以及在哪里放置生成的JavaScript包。

在static目錄中添加一個(gè)名為webpack.config.js的文件，下面的內(nèi)容如下:

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文件中添加一些運(yùn)行命令會(huì)是你的開(kāi)發(fā)過(guò)程更加順暢。我總是在自己的package.json 文件中添加一些build, dev-build 和 watch 命令。

build用于構(gòu)建生產(chǎn)環(huán)境版本, dev-build用于開(kāi)發(fā)時(shí)的構(gòu)建版本，watch的作用和dev-build類似，只不過(guò)可以自動(dòng)監(jiān)視項(xiàng)目文件是否修改，并且自動(dòng)重新構(gòu)建被修改的部分，你只需要刷新瀏覽器就可以看到改動(dòng)后的結(jié)果。

自動(dòng)化構(gòu)建你的項(xiàng)目還有一個(gè)好處，那就是你不會(huì)耗費(fèi)時(shí)間去思考為什么修改了代碼卻看不到效果，一般遇到這種情況純粹是因?yàn)槟阃浟藰?gòu)建它們！

以下是我的 package.json 文件內(nèi)容：

{
  "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能夠允許我們使用最新的JavaScript特性編碼，即便是瀏覽器還沒(méi)有支持它們。通過(guò)安裝ES2015和react presets，Babel能夠把使用 Javascript 新特性和 React jsx 的代碼轉(zhuǎn)換為與當(dāng)前瀏覽器兼容的 JavaScript 語(yǔ)法。

Babel轉(zhuǎn)換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 規(guī)則。注意，我們?cè)谝?guī)則中排除了node_modules。這可以保證 Babel 不會(huì)嘗不會(huì)對(duì) node 模塊進(jìn)行轉(zhuǎn)換，從而不會(huì)影響到node程序的加載速度。

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

創(chuàng)建 index.jsx 和 index.html

為了能在瀏覽器中看到一些東西，我們將創(chuàng)建一個(gè)簡(jiǎn)單的index.html頁(yè)面，這個(gè)頁(yè)面只顯示一個(gè)由JavaScript彈出的“Hello World!”對(duì)話框，以此來(lái)證明設(shè)置是正確的。

在static目錄中創(chuàng)建一個(gè)index.html文件，并填寫下面的代碼：

在static/js目錄下創(chuàng)建一個(gè)index.jsx文件，并添加下面的代碼：

alert(“Hello World!”);

啟動(dòng)一個(gè)獨(dú)立的終端窗口來(lái)運(yùn)行前面創(chuàng)建的 Webpack watch 命令，這樣當(dāng)我們?cè)诠ぷ鲿r(shí)，它可以在后臺(tái)一直運(yùn)行。它會(huì)在沒(méi)有編碼錯(cuò)誤的前提下自動(dòng)構(gòu)建你的包。

$ npm run watch

打開(kāi)瀏覽器并訪問(wèn)index.html，應(yīng)該能夠看到彈出一個(gè)寫著“Hello World!”的提示窗口。

首先需要安裝React：

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

下一步讓我們用一個(gè)簡(jiǎn)單的 React 應(yīng)用替換掉前面的index.jsx，并讓它加載一個(gè)創(chuàng)建在多帶帶的 App.js 文件中的 React 類。

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

React 類需要在不同的React源碼文件中做導(dǎo)出，以方便后面的使用。通常每個(gè)文件中只寫一個(gè)類，并且導(dǎo)出。

// App.jsx
import React from “react”;
export default class App extends React.Component {
  render () {
    return 
 Hello React!
;
  }
}

如果我們現(xiàn)在刷新瀏覽器，頁(yè)面上將會(huì)顯示“Hello React!”，而不再是“Hello World!”提示框。

關(guān)于Python服務(wù)器我們將會(huì)使用Flask。Flask是小型Python應(yīng)用的最佳選擇之一。“微框架（microframework）”可以使你在短短幾分鐘內(nèi)輕松快速的使一個(gè)服務(wù)跑起來(lái)。對(duì)于大型應(yīng)用和某些專業(yè)領(lǐng)域，企業(yè)通常會(huì)使用 Pyramid 或 Django。如果你想在自己的環(huán)境中擁有很大的靈活性和能夠自定義配置的特性，Pyramid是一個(gè)不錯(cuò)的選擇。Django則提供了一個(gè)全功能的Web框架，同時(shí)使你不必為應(yīng)用的配置花費(fèi)太多的時(shí)間，比如在數(shù)據(jù)庫(kù)配置等方面。

創(chuàng)建一個(gè)新的virtualenv并安裝Flask

在server目錄中創(chuàng)建Flask服務(wù)源碼文件，添加一個(gè)用來(lái)返回返回“Hello World!”的端點(diǎn)路由“/hello”，再添加一個(gè)主頁(yè)面端點(diǎn)路由 “/“ 用來(lái)渲染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()

運(yùn)行python服務(wù)：

$ python server.py

接下來(lái)訪問(wèn)http://localhost:5000/就可以看到 react 應(yīng)用提供的的“Hello React!”提示。訪問(wèn)http://localhost:5000/hello 將會(huì)看到由Python端點(diǎn)路由返回的“Hello World!”

恭喜，現(xiàn)在你已經(jīng)有了一個(gè)基本的全棧應(yīng)用

如果你想要學(xué)習(xí)如何與服務(wù)器進(jìn)行通信，以及怎樣使自己的程序更加美觀，請(qǐng)等待本文的下半部分：《一個(gè)小時(shí)搭建一個(gè)全棧Web應(yīng)用框架——界面美化與功能實(shí)現(xiàn)》