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 写上, 这样更直观

五. 总结

总体缺乏美感, 可是也算是一种思路, 过程挺好玩的我就分享出来了, 虽然没有难点但挺有意思的.