1

mock-stores是一款简单易用的数据mock npm包,可以针对无法拦截ajax请求或者非ajax请求的项目做mock,简单易用仅需三步,便可完成整个过程。优点有:

1.简单易用易部署

2.随处可用

3.无脏代码

4.轻量级(仅十多行代码)

5.改变mock数据无需重新编译

6.我实在想不出来还有比这个更简单省事的了

1.安装

$ yarn add mock-stores -D

2.ProvidePlugin

首先在你项目的根目录下,创建mock目录,然后在该文件夹下创建js/json文件,存放服务端返回的json数据,然后在webpack.config.js文件中全局提供该插件,然后你就可以到处使用该变量了。


// webpack.config.js
  plugins: [
    new webpack.ProvidePlugin({
      Store: 'mock-stores'
  })

3.Mock it

在服务端返回数据的地方填充该对象,并提供一个你为该接口创建的json/js文件的名字,mock-stores对象会根据该名字在mock目录下查找对应的文件,返回该数据:

fetch('/users.json')
   .then(function(response) {
     let item = Store['yourMockJsFileName'] || response.json()
   })

在mock目录下,你还可以不断创建目录,mock-stores对象会根据名字去查找。

开发环境中,mock-stores对象使用的是你创建的mock数据,生产环境则使用的是线上数据,这一切都是自动完成的,因此,你无须移除 Store['yourMockJsFileName'] 这个对象

github地址:https://github.com/hawx1993/m...


trigkit4
30.2k 声望4.7k 粉丝