基于webpack 简单易上手的mock方案

[hawx1993]

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/mock-stores