mockjs區分環境,過程頗有趣

mockjs區分環境, 過程頗有趣

原由.

1. 網上找了不少mockjs(是mockjs不是其餘的mock插件)環境的配置, 基本全是錯的.
2. 生產環境不須要mock, 開發環境有時須要mock有時不須要mock.
3. 可能這個功能點過小了, 致使你們都不在意.
4. 可是越小的點越有趣味.

一. 要達到的效果

1. 不能夠手動註釋掉import './mock'這段話, 由於只要是人爲操做就會存在失誤的可能性.
2. 用es6的模塊規則書寫, 而不用common
3. 區分 yarn mock 與 yarn xxx
4. 寫着爽, 可擴展, 核心代碼不用動

二. 想到的各類方法與坑

方法一. 咱們公司以前使用的是"express"本身起了一個服務, 而後讀取文件夾名爲path, 內容固然就是內容了, 這樣作也沒問題, 可是畢竟不是專業的處理方式, 好比同一個path既是get地址又是post地址, 那這個區分起來就須要改動代碼了, 還有就是在模擬數據的隨機性上幾乎沒有, 好比mockjs能夠模擬 1-12位的數字返回, 而當前這種方式只能"寫死", 是在不是寫個隨機函數而後每次都調用函數, 這樣越作越大沒實際意義, 還不如採用成熟的方案.
方法二:
mockjs
下載: yarn add mockjs -D 只是開發使用, 誰會把這個放到生產??
調用: import Mock from 'mockjs'
具體怎麼配置就不說了, 簡單的過度, 一會能夠說下工程化
方法三:
封裝好的axios請求外面, 再封裝一層mock層, 這個就想一想吧,太邪門歪道了.

三. 知識點與坑點(好玩的來了)

網上都說利用cross-env來區分環境變量, 可是這裏有個大坑你知道麼???
我選擇的是"cross-env": "^6.0.3"
在package.json裏面配置 "mock": "cross-env MOCK=true vue-cli-service serve",
本覺得大功告成了, 在main.js裏面下面代碼徹底不執行
if(process.env.MOCK === 'true'){...}
坑點1:
cross-env屬於node環境, 這個值在web代碼裏面是取不到的, 這個值能夠在vue.config.js裏面import咱們的mockjs, 可是會報錯, 不可使用es6的引入方式, 須要commonjs的方式裏面拿到, 那咱們轉移戰場, 在 vue.config.js裏面import咱們的mockjs, 可是會報錯, 不可使用es6的引入方式, 須要commonjs的方式require進來
(想要在客戶端側代碼中使用環境變量: process.env.VUE_APP_xxx, 可是有這個變量 import語法也不支持按需決定引入與否)
坑點2:
用require的方式引入mockjs, 那麼意味着mock文件的工程化不能用es6的寫法去作了, 真的忍不了啊
坑點3:
require的方式引入會報Mock.setup找不到的錯誤, 這個估計是mockjs自己就沒想讓用戶這樣引用.
坑點4:
用require的方式引入了,也執行了, 可是無效, 由於mockjs的實現方式不是在外界起一個服務而後監聽一個工程的請求.

想其餘辦法吧
首先mock既然須要import的方式在main.js裏面引入, 那我還就這樣使用了, 那咱們其實能夠在文件級別來解決這個問題, 問題被提煉出來了在main.js文件裏面yarn mock的時候加上'"import './mock'"', yarn xxx 去掉"import './mock'", 這很清晰明瞭了,真的很暴力.

涉及到修改文件node出場
先來規範一個站位符吧, 畢竟須要區分是否插入, 以及插在哪裏, 這樣後來的同窗也能順藤摸瓜找到總體的邏輯
你們必定要注意, 代碼必定要是連續的, 不能夠出現憑空出現某些邏輯這種寫法, 好比vue的mixins方法, 這個會致使項目很難交接, 沒法定位問題等等壞處
1.// mock : 短小精悍,缺點明顯, 不定誰就該刪除了.
2./** mock(不要刪除) **/: 比第一個更有戲劇性了.
3.不寫佔位符, 直接操做, 這樣就是不符合代碼邏輯連貫性原則, 新同窗可能都不知道你的操做怎麼實現的, 不建議徹底無感的操做, 雖然留一個佔位符看着挺low, 可是方便追溯.

node判斷文件內容(簡單的替換)
添加邏輯

const path = require('path');
const fs=require("fs");

let main = fs.readFileSync( path.resolve(__dirname, '../src/main.js'),'utf-8');

main = main.replace('/** mock(不要刪除) **/', "import '../mock'");

fs.writeFile(path.resolve(__dirname, '../src/main.js'), main, 'utf8', (err) => {
  if (err) throw err;
  console.log('成功引入mock數據');
});

刪除邏輯

const path = require('path');
const fs=require("fs");

let main = fs.readFileSync(path.resolve(__dirname, '../src/main.js'),'utf-8');

main = main.replace( "import '../mock'", '/** mock(不要刪除) **/');

fs.writeFile(path.resolve(__dirname, '../src/main.js'), main, 'utf8', (err) => {
  if (err) throw err;
  console.log('去掉mock數據');
});

兩個腳本寫完開始引入把(下面代碼的錯誤你看出來了麼)

"scripts": {
    "mock":"node ./mock/add.js vue-cli-service serve",
    "serve": "node ./mock/delete.js vue-cli-service serve",
    "build": "node ./mock/delete.js vue-cli-service build"
  },

運行起來你就會發現vue-cli-service serve不執行, 這是由於這條語句須要區分一下
不少同窗這裏進坑了, 下面的寫法有時也是有bug的

"scripts": {
    "mock":"node ./mock/add.js && vue-cli-service serve",
  },

正確的寫法以下 &&須要緊貼 node語句, 不然可能會有莫名其妙的bug出現, 也算是小知識.

"scripts": {
    "mock":"node ./mock/add.js&& vue-cli-service serve",
  },

我也想過, 每行都寫node ./src/mock/add.js這種代碼 , 不如把每一個命令都放在node裏面就行了, 直接npx之類的去執行就能夠了, 可是我不這樣作仍是由於上面的緣由, 這樣寫會打亂其餘同窗的編寫習慣, 讓別人蒙b可是效益不大, 那麼就不要去作了.

四. 工程化結構

本着工程化的原則,確定是要單獨創建一個mock文件夾, 這個不要放在src裏面了, 要與src平級, 裏面的index文件負責導出全部的接口, 由於考慮到大的需求可能會新增幾十個接口, 因此我仍是建議再創建一個本次版本的mock接口的文件夾, 這樣也方便集體刪除不留後遺症, 若是某些接口須要mock很複雜的數據形式, 那仍是要單獨創建一個文件來存放他的邏輯內容, 雖然mock的時候不寫method默認就是get, 我仍是建議吧get 寫上, 這樣更直觀

五. 總結

總體缺乏美感, 可是也算是一種思路, 過程挺好玩的我就分享出來了, 雖然沒有難點但挺有意思的.