摘要：現(xiàn)在一般需要分前后端，因?yàn)榇罅壳岸丝蚣芎凸ぞ哝湹挠咳敫词切枨髲?fù)雜了，讓前端可以跟后端獨(dú)立開(kāi)來(lái)。但是，無(wú)論是前端去寫(xiě)模板，亦或是完全前后端分離去寫(xiě)，都脫離不了與后端進(jìn)行數(shù)據(jù)交互。

--> GitHub地址

舊石器時(shí)代，Web 開(kāi)發(fā)并不會(huì)去刻意區(qū)分前后端，寫(xiě)后端的人覺(jué)得寫(xiě)數(shù)據(jù)庫(kù)跟寫(xiě)模板都是應(yīng)該具備的技能?，F(xiàn)在一般需要分前后端，因?yàn)榇罅壳岸丝蚣芎凸ぞ哝湹挠咳耄ǜ词切枨髲?fù)雜了），讓前端可以跟后端獨(dú)立開(kāi)來(lái)。但是，無(wú)論是前端去寫(xiě)模板，亦或是完全前后端分離去寫(xiě) JSX，都脫離不了與后端進(jìn)行數(shù)據(jù)交互。

以上是本工具產(chǎn)生的動(dòng)因，我們暫且將前后端交互的數(shù)據(jù)分為模板數(shù)據(jù)（由后端直接填充）和異步數(shù)據(jù)（通過(guò) HTTP 接口），工具的作用就是平滑地進(jìn)行數(shù)據(jù)交互過(guò)渡，降低溝通成本。

在開(kāi)發(fā)前期，后端可能并沒(méi)有開(kāi)始寫(xiě)或者沒(méi)有寫(xiě)完，前端此時(shí)只能通過(guò)本地?cái)?shù)據(jù)模擬實(shí)際數(shù)據(jù)進(jìn)行布局和組件的調(diào)試，一般叫做 mock 數(shù)據(jù)。

待前端寫(xiě)的差不多了，后端可能也差不多了，那么此時(shí)需要聯(lián)調(diào)，因?yàn)槁?lián)調(diào)的過(guò)程很可能伴隨著大量的修復(fù)工作，前后端雜糅在一起部署的代價(jià)太高，高效的方式就是通過(guò)代理的方式直接從模擬數(shù)據(jù)切到后端數(shù)據(jù)，這里叫 proxy。

如果把 mock 和 proxy 結(jié)合起來(lái)，那么就叫 moky !

項(xiàng)目的 GitHub 里面已經(jīng)簡(jiǎn)單的說(shuō)了下使用方法，不過(guò)我覺(jué)得還是有必要補(bǔ)充點(diǎn)額外的說(shuō)明。

首先，需要強(qiáng)調(diào)的是，moky 側(cè)重點(diǎn)只有 mock 和 proxy，因此可以做到代碼也只有 200 行左右，市場(chǎng)上已經(jīng)有很多人做這方面工作了，而基本都不能滿(mǎn)足我的需求。

使用跟 webpack 很類(lèi)似，全局安裝 npm i moky -g ，只需要一個(gè)配置文件，然后直接運(yùn)行在配置文件 moky.config.js 所在目錄運(yùn)行 moky ，或者通過(guò)參數(shù)指定配置文件路徑 moky -c /path/to/xxx.js

但是，正確使用前一般需要先配置好 moky.config.js，下面針對(duì)配置文件做一個(gè)羅嗦的介紹：

// 這里之所以需要 path，是因?yàn)橄旅娴奈募窂蕉急仨毷墙^對(duì)路徑
var path = require("path");

module.exports = {
  // 本地監(jiān)聽(tīng)端口，運(yùn)行 moky 會(huì)起一個(gè) server
  localPort: 3000,
  
  // 異步數(shù)據(jù)的 mock 目錄路徑
  asyncMockPath: path.join(__dirname, "mock"),
  
  // 同步數(shù)據(jù)的 mock 目錄路徑
  viewsMockPath: path.join(__dirname, "tplMock"),
  
  // 模板所在目錄，如果你是完全前后端分離，沒(méi)有模板，那至少有個(gè) index.html 吧
  // 把這個(gè) index.html 所在的目錄當(dāng)作模板目錄即可
  viewsPath: path.join(__dirname, "views"),
  
  // 這個(gè)并沒(méi)有卵用，如果有 favicon 還是設(shè)置下吧
  faviconPath: path.join(__dirname, "public", "favicon.ico"),
  
  // 這里不要被 js 和 css 誤導(dǎo)了，這里是設(shè)置靜態(tài)資源的路由
  // 注意，其優(yōu)先級(jí)比較高哦，所以不要漏了/多了/跟其它沖突了
  publicPaths: {
    "/css": path.join(__dirname, "public", "css"),
    "/js": path.join(__dirname, "public", "js"),
  },
  
  // 模板引擎的設(shè)置，具體參考 koa-views，moky 已經(jīng)內(nèi)置了幾個(gè)模板引擎，可以直接設(shè)置就用
  // 注意兩點(diǎn)：如果選擇 freemarker 一定保證 JAVA_HOME 等設(shè)置是對(duì)的；
  // 如果是純 HTML 頁(yè)面，你隨便選個(gè)模板引擎即可，推薦 nunjucks
  viewConfig: {
    extension: "html",
    map: { html: "nunjucks" },
  },
  
  // 這里為了解決很多 Web 容器采用的 Virtual Host 機(jī)制（一個(gè) IP:PORT 通過(guò)域名對(duì)應(yīng)多個(gè)服務(wù)）
  // 由于我們本地啟動(dòng)的可能是 http://localhost:3000，如果有 Virtual Host 機(jī)制則通不過(guò)的
  // 如果設(shè)置了 hostName，在發(fā)送請(qǐng)求前程序會(huì)自動(dòng)替換 Host 頭為 hostName
  hostName: "hacker-news.firebaseio.com",
  
  // 這里是proxy 映射表，在啟動(dòng)的時(shí)候如果是 moky -e dev，異步請(qǐng)求會(huì)自動(dòng)走 dev 對(duì)應(yīng)的 proxy
  // 如果沒(méi)找到對(duì)應(yīng)的，那么默認(rèn)用本地的 mock 數(shù)據(jù)作為異步數(shù)據(jù)
  proxyMaps: {
    dev: "https://hacker-news.firebaseio.com",
    local: "http://localhost:8080",
  },
  
  // 這是頁(yè)面路由的設(shè)置，這里的 key 是路由（URL 里見(jiàn)到的），value 是頁(yè)面的相對(duì)路徑
  // 路徑相對(duì)于 viewsPath , 不用加后綴，viewConfig.extension 指明了
  urlMaps: {
    "/": "index",
    "/page": "page/index",
  },
}

最簡(jiǎn)單的試用就是全局安裝 moky，然后 clone 項(xiàng)目，進(jìn)入 example 目錄，直接運(yùn)行 moky

先看下目錄結(jié)構(gòu)：

├── mock
│?? ├── get
│?? │?? ├── test
│?? │?? │?? └── index.json
│?? │?? └── v0
│?? │??     └── item
│?? │??         └── 2921983.json.json
│?? └── post
│??     └── index.json
├── moky.config.js
├── public
│?? ├── css
│?? │?? └── main.css
│?? ├── favicon.ico
│?? └── js
│??     └── main.js
├── tplMock
│?? ├── index.json
│?? └── page
│??     └── index.json
└── views
    ├── index.html
    └── page
        └── index.html

直接運(yùn)行 moky 會(huì)默認(rèn)使用 mock 模式，數(shù)據(jù)流是這樣的：

我們?yōu)g覽器打開(kāi) http://localhost:3000/page

路由會(huì)根據(jù)我們的設(shè)置匹配一遍：靜態(tài)資源 -> 頁(yè)面 -> 異步接口，這里匹配到頁(yè)面就停止了

程序會(huì)去 tplMock/page/index.json 下拿模板數(shù)據(jù)，然后填充渲染返回

此時(shí)頁(yè)面里的靜態(tài)資源的會(huì)被首先從 public 下路由

然后會(huì)有個(gè)異步接口 GET v0/item/2921983.json，會(huì)最終被異步處理模塊處理

因?yàn)槲覀儐?dòng)的時(shí)候是 mock 模式，于是會(huì)去 mock/get 文件夾找對(duì)應(yīng)位置的 json 作為本地 mock 數(shù)據(jù)

如果我們是 moky -e dev 啟動(dòng)的，那么 GET v0/item/2921983.json 會(huì)被從 proxyMaps.dev 反代

模板數(shù)據(jù)無(wú)法走 proxy 從遠(yuǎn)端獲取

對(duì)第三方登錄/認(rèn)證不友好