mock-stores——簡單易用的資料mock方案

MJI發表於2019-03-03
Mock

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地址：github.com/hawx1993/mo…

相關文章