摘要：現(xiàn)在一般需要分前后端，因為大量前端框架和工具鏈的涌入根源是需求復雜了，讓前端可以跟后端獨立開來。但是，無論是前端去寫模板，亦或是完全前后端分離去寫，都脫離不了與后端進行數(shù)據(jù)交互。

--> GitHub地址

舊石器時代，Web 開發(fā)并不會去刻意區(qū)分前后端，寫后端的人覺得寫數(shù)據(jù)庫跟寫模板都是應該具備的技能。現(xiàn)在一般需要分前后端，因為大量前端框架和工具鏈的涌入（根源是需求復雜了），讓前端可以跟后端獨立開來。但是，無論是前端去寫模板，亦或是完全前后端分離去寫 JSX，都脫離不了與后端進行數(shù)據(jù)交互。

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

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

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

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

項目的 GitHub 里面已經(jīng)簡單的說了下使用方法，不過我覺得還是有必要補充點額外的說明。

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

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

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

// 這里之所以需要 path，是因為下面的文件路徑都必須是絕對路徑
var path = require("path");

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

最簡單的試用就是全局安裝 moky，然后 clone 項目，進入 example 目錄，直接運行 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

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

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

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

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

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

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

因為我們啟動的時候是 mock 模式，于是會去 mock/get 文件夾找對應位置的 json 作為本地 mock 數(shù)據(jù)

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

模板數(shù)據(jù)無法走 proxy 從遠端獲取

對第三方登錄/認證不友好