手動編寫mock服務（ma-mock）

上一篇文章json-server的實踐與自定義配置化提到過，json-server在我看來不太適用；以前有贊開源的zan-proxy我也嘗試用過，其痛點在於mock數據保存在第三方，這個特性使得公司項目不適合使用zan-proxy，因此嘗試本身搭建一個mock服務——ma-mock。

背景

項目中須要對兩個開發地址進行代理，部分數據也須要使用mock數據，因此能夠參照zan-proxy作代理和mock的切換按鈕，鑑於以前是使用koa編寫後端服務的，因此此次使用koa編寫可用於mock和proxy的可視化服務。

構思

雖然說是參照zan-proxy，可是我仍是保留着本身的想法；首先，與zan-proxy不一樣，zan-proxy使用瀏覽器插件進行地址代理，其主要目的是用於調試線上頁面，但咱們只在dev環境使用，使用webpack的proxyTable將後端接口都代理到mock服務，由mock服務統一分發代理仍是返回mock數據便可；其次，數據保存在本地，構建一個本地文件增刪查改的操做，mock服務只在dev開發中使用，io的損耗其實沒有太大的區別；

後端

主要有三個功能，分發mock和proxy、提供可視化界面的後端接口、部署前端資源，由於主要是給前端人員使用，因此維護一份全局變量（lib/Global.js）替代redis。

三個功能的執行順序爲 分發mock和proxy -> 返回單頁面資源 -> 可視化界面的後端接口

分發功能能夠利用koa中間件特性：

'use strict';

const { Logger, fsHandler, Global } = require('../lib/index');
const axios = require('axios');
const pathToRegexp = require('path-to-regexp');
/** * * @param {object} options 配置項 * {object} options.prefix mock數據的url前綴 * @return {function} * */
module.exports = options => {
  // 進行中間件參數的配置，最終返回一箇中間件函數
  let prefix = options.prefix;

  // 兼容prefix格式的寫法 "/__DEV__/xxx" 或者 "/__DEV__/xxx/"
  if (prefix.lastIndexOf('/') + 1 !== prefix.length) {
    prefix = prefix + '/';
  }

  return async function(ctx, next) {
    let curPath = ctx.path;
    // 不符合prefix的接口地址直接跳過
    if (curPath.indexOf(prefix) !== 0) return await next();

    let pathArr = curPath.split(prefix);

    // 若是prefix以後再也不有path則請求不合法
    // 例如：prefix爲 __DEV__/pay/但請求路徑爲http://*/__DEV__/pay/
    if (pathArr.length < 2) {
      ctx.body = '請求路徑不合法';
    }

    // 判斷是否使用MOCK數據
    const find = Global.mockList.find(it => {
      const re = pathToRegexp(it.url);
      return re.test(`/${pathArr[1]}`);
    });

    // 規則是mock優先級大於proxy
    if (find && find.enable) {
      ctx.body = handlerMock(find.url.slice(1));
    } else if (Global.enableProxy) {
      ctx.body = await handlerProxySync(`/${pathArr[1]}`, ctx);
    } else {
      ctx.body = '未開啓proxy';
    }
    // 此處沒有next()，直接返回數據
  };

  // 用mock數據
  function handlerMock(filePath) {
    let result = '';

    try {
      result = fsHandler.getMockFile(filePath);
    } catch (e) {
      result = e;
    }
    Logger.debug(result);

    return { ...result, type: 'MOCK' };
  }

  // 後端代理
  async function handlerProxySync(api, ctx) {
    const options = {
      ...ctx.request,
      url: `${Global.currentProxyUrl}/${api}`,
      params: ctx.query,
    };

    try {
      const res = await axios(options);
      return { ...res, type: 'PROXY' };
    } catch (e) {
      return {
        message: e.message,
        type: 'PROXY',
      };
    }
  }
};

複製代碼

中間件使用

// 配置mock
app.use(
  mockProxy({
    prefix: '__DEV__',
  })
);
複製代碼

可視化界面的後端接口

常規後端restful接口，此處略過不講。

前端靜態資源部署

由於是開發環境使用，因此沒必要部署到nginx上，本身編寫了基於koa-static的koa-spa-static。

使用方法，配置採用vue打包出來的目錄，react可能須要自行按狀況修改:

const spaStatic = required('koa-spa-static');
// 掛在靜態資源
app.use(
  spaStatic({
    matchReg: /^(?!\/api)/, // 不以"/api"開頭的接口地址會返回靜態資源
    root: path.join(__dirname, './dist'), // 靜態資源目錄
    staticReg: /^\/static/, // 前端static資源返回文件，其餘返回index.html
  })
);
複製代碼

前端

使用element-ui2的組件構造，屬於簡單的組裝，基於本身編寫的vue cli模板，使用命令

vue init masongzhi/vue-template-webpack

其餘

ma-mock服務的安裝和使用

安裝

npm install -D ma-mock

在根目錄編寫.mamockrc.js配置文件

const path = require('path');
 
// 默認配置
module.exports = {
  prefix: '/__DEV__',
  rootPath: path.resolve(__dirname, './data/mock'),
  proxyPath: path.resolve(__dirname, './data/proxy'),
  proxyFilename: 'config.json',
};
複製代碼

配置webpack proxyTable

// ...省略
module.exports = {
  // ...省略
  dev: {
    // ...省略
    proxyTable: {
      // 填寫 .mamockrc.js的prefix，默認爲'/__DEV__'
      '/__DEV__': {
        target: 'http://localhost:3001', // 接口的域名
        // secure: false, // 若是是https接口，須要配置這個參數
        changeOrigin: true, // 若是接口跨域，須要進行這個參數配置
      }
    },
  },
}
複製代碼

package.json添加script命令

mamock [--port 3001]

.mamockrc.js的讀取

咱們在項目跟目錄編寫了.mamockrc.js文件，那是怎麼在mock服務中讀取到這個文件的信息呢，或者說怎樣才能將npm包的配置參數寫在根目錄的文件內。

咱們可使用rc-config-loader，其餘相似包也行，像prettier就使用editorconfig和本身編寫的editorconfig-to-prettier。

const rcfile = require("rc-config-loader");

// 會向上遍歷.mamockrc or .mamockrc.json or .mamockrc.js or.<product>rc.yml, .mamockrc.yaml
// 咱們須要用到基於跟目錄的data文件，因此須要用到__dirname，因此使用js文件
const data = rcfile('mamock');
複製代碼

bin命令的使用

咱們在package.json的scripts編寫了mamock --port 3001命令，是怎麼實現的呢。

在package.json添加

"bin": {
    "ma-mock": "./bin/mock-proxy.js",
    "mamock": "./bin/mock-proxy.js"
}
複製代碼

在bin目錄添加mock-proxy.js

#!/usr/bin/env node
 'use strict';

// 定義用到的參數
const keys = ['port', 'prefix', 'rootPath', 'proxyPath', 'proxyFilename'];
const argvs = process.argv.slice(2);
function getArgv(key) {
  const index = argvs.findIndex(it => it === `--${key}`);
  return index >= 0 && argvs[index + 1];
}
keys.forEach(key => {
  const value = getArgv(key);
  if (value) process.env[key] = value;
});
// 執行koa的index.js
require('../server/index.js');

複製代碼

自動打開瀏覽器

啓動ma-mock服務時自動打開瀏覽器

// index.js
const opn = require('opn');

app.listen(PORT);

opn(`http://localhost:${PORT}`, {app: 'google chrome'});
複製代碼

總結

目前仍是比較粗糙，後端只作了簡單的joi參數校驗，沒對mock地址進行url校驗；mock數據也只支持基本的application/json類型，且不支持mock.js的配置；最重要的，單元測試沒補全，後續會慢慢填。

若是有什麼建議或者想貢獻代碼，能夠發issue和pr，項目地址: github.com/masongzhi/m…