puer實現先後端分離開發

時間 2019-11-11

標籤 puer 實現後端分離開發简体版

原文原文鏈接

簡介

簡而言之，Puer是一個能夠實時編輯刷新的前端服務器。特性一覽:javascript

提供一個當前或指定路徑的靜態服務器
全部瀏覽器的實時刷新：編輯css實時更新(update)頁面樣式，其它文件則重載(reload)頁面
提供簡單熟悉的mock請求的配置功能，而且配置也是自動更新。
可用做代理服務器，調試開發既有服務器的頁面，可與mock功能配合使用
集成了weinre，並提供二維碼地址，方便移動端的調試
能夠做爲connect中間件使用(前提是後端爲nodejs，不然請使用代理模式)

能夠發現這裏功能並很少，但羅列的基本都是實際前端開發中會涉及到的。可能敏銳的朋友會點出，同類的browser-sync提供了更強的操做同步的功能。這點其實主要不想去盲目攀比功能(實現其實並不難，由於基礎的注入腳本已經作了，剩下的都只是功能堆砌)，目前的出發點都是做者實際的需求(好吧，實際上是懶)。還有就是，其實puer誕生比它要早一年多。php

讓咱們開始使用吧css

安裝

確保你安裝了nodejs
使用npm全局安裝puer命令html

npm install puer -g

輸入puer -h能夠查看Help前端

Usage:  puer [options...]

Options: -p,--port server's listen port, 8000 default  -f,--filetype fileType to watch(split with '|'), defualt 'js|css|html|xhtml'  -d,--dir your customer working dir. default current dir  -i,--inspect start weinre server and debug all puer page  -x,--exclude exclude file under watching(must be a regexp), default: ''  -a,--addon your addon's path  -t,--target proxy url  --no-reload close auto-reload feature,(not recommended)  --no-launch close the auto launch feature  -h,--help help list

強烈中文即時感的英語相信和你們交流起來不會很困難。java

使用

90%的使用場景下node

cd /path/to/workspace ↵
puer ↵

puer會默認爲你打開http://localhost:8000頁面(端口能夠-p 8001參數進行控制)，並貼心的幫你列出了全部你本地可用的ip以及當前的地址二維碼，方便手機訪問。git

編輯當前路徑下的文件，會實時更新頁面(不管你在多少臺電腦打開多少個頁面)。
github

關於如何命令行下快速到達工做目錄，做者推薦兩個工具shell

z: 必裝shell工具，快速進入最經常使用目錄
sublime-terminal: 直接進入當前文件或工程的所在路徑

在開發靜態頁面時，這個簡單的功能意義非凡，特別是雙屏的時候，能夠徹底解放你的F5鍵。關鍵是：

保存後看到瀏覽器同步刷新，有種莫名的愉悅感涌上心頭有木有？

做者簡單將這種現象歸結於以前看到的一篇文章：【人沒法在兩種思惟模式下進行高效切換】，猜測這可能這和CPU的進程切換是同樣同樣的。

進階1 mock請求

假設你的靜態頁面開發到必定程度，須要與服務器端交互了，然後臺服務還徹底沒法聯調，這實際上是屬於最簡單的先後端分離開發的場景。通常而言，做者會經過如下幾種方案。

層級1: 經過代碼解耦，直接在前端mock數據

這種方式影響較大，並且不管你解耦的如何，都會增長最終上真實環境的切換成本。

層級2: 經過fiddler等調試代理工具mock數據

優勢是到正式環境的切換成本小，但配置成本較大，也接口mock也有侷限性並基本上只能是靜態數據模擬。

層級3：利用puer無痛的解決這個問題

puer提供了叫插件(addon)的功能，集成了express的route.js來達到最簡的路由配置，能夠提供基於真實http請求與相應的動態的mock數據。

puer -a route.js
route.js 這麼寫

// use addon to mock http request
module.exports = {
  // GET
  "GET /v1/posts/:id": function(req, res, next){
    // response json format
    res.send({
      title: "title changed",
      content: "tow post hahahah"
    })

  },
  // PUT POST DELETE is the same
  "PUT /v1/posts/:id": function(){

  },
  "POST /v1/posts": function(){

  },
  "DELETE /v1/posts/:id": function(){

  }
}%

它其實就是一段nodejs程序，輸出是一配置對象，key的空格前表明的是請求Method，後半部分是請求路徑，而value表明回調函數和express的路由中間件是一致的，傳入的request和response對象，相較於原生的提供了一些額外方法，不瞭解的也能夠戳這裏

【戳這裏看演示GIF】

經過演示其實你能夠發現，編輯route.js後，這份配置腳本是動態更新的，免去了你一次次重啓服務器的工做。

進階2：使用代理模式，應用puer到以有服務器中

開發進行到必定階段，通常後端服務就逐步進入了，靜態頁面的開發再也不適用。到這個時候，咱們可使用--target path切換到代理模式將puer做爲一個代理服務器使用。

好比本地已經存在一個localhost:8020的服務，你要在其上實現自動刷新的功能，請使用 -t 或 --target。

puer -t http://localhost:8020

【請戳演示GIF】

須要注意的是，進階2提到的addon是能夠和這個模式配合使用，這使得咱們在後臺服務青黃不接的時候率先開發完前端功能，深藏功與名。

puer -t http://localhost:8020 -a route.js

【請戳target配合addon的演示】

進階3：使用weinre調試全部通過puer的頁面

weinre是目前最經常使用的遠程調試工具，它雖然幾乎沒法調試JS，可是因爲和平臺、瀏覽器無關的特性，使得這個低效的工具一直流行至今，也有不少工具集成了它，好比我以前提到的MIHTool。

不過要使用weinre，你須要在每一個調試的頁面插入一個記不住名字的腳本，並開啓weinre服務，這都屬於重複性勞動。puer經過 -i flag來開啓 weinre的內置集成，每個通過puer的頁面都會被自動注入腳本。你能夠在9001端口找到你的weinre服務，也能夠經過puer的初始頁面進入

puer -i

【請戳inspect的演示】

進階4：做爲中間件來應用與nodejs做爲後臺的產品

這個功能其實並不經常使用了，它將puer做爲express/connect服務器的中間件來使用，先貼個代碼範例。

var connect = require("connect")
var path = require("path")
var http = require("http")
var puer = require("puer")
var app = connect()
var server = http.createServer(app)

var options = {
    dir: "path/to/watch/folder", 
    ignored: /(\/|^)\..*|node_modules/  //ignored file
}

app.use(puer.connect(app, server , options))   //use as puer connect middleware
// you must use puer middleware before route and static midleware(before any middle may return 'text/html')
app.use("/", connect.static(__dirname))


server.listen(8001, function(){
    console.log("listen on 8001 port")
})