Webpack最簡單的方式Mock API

小弟調調™發表於2018-02-08
WebMockAPI

mocker-api 是一個為 REST API 建立 mock 的 webpack-dev-server 中介軟體。 當您嘗試在沒有實際的 REST API 伺服器的情況下，測試您的應用程式時，這將會很有幫助。

安裝

npm install mocker-api --save-dev
複製程式碼

使用

定義API，假設我們講API放到一個獨立檔案 mocker.js 中, 下面我們定義四個 API，每個 API 都放到 json 的 key 和 value 中，如下：

const proxy = {
  'GET /api/user': {id: 1, username: 'kenny', sex: 6 },
  'GET /api/user/list': [
    {id: 1, username: 'kenny', sex: 6 },
    {id: 2, username: 'kenny', sex: 6 }
  ],
  'POST /api/login/account': (req, res) => {
    const { password, username } = req.body;
    if (password === '888888' && username === 'admin') {
      return res.send({
        status: 'ok',
        code: 0,
        token: "sdfsdfsdfdsf",
        data: {id: 1, username: 'kenny', sex: 6 }
      });
    } else {
      return res.send({status: 'error', code: 403 });
    }
  },
  'DELETE /api/user/:id': (req, res) => {
    console.log('---->', req.body)
    console.log('---->', req.params.id)
    res.send({ status: 'ok', message: '刪除成功！' });
  }
}
module.exports = proxy;
複製程式碼

上面的 key 比較特殊，由 methd 和 path 組合，中間一個空格間隔，如：GET /api/user。value 可以是 json 或者 函式。

命令列中使用

⚠ ️不依賴於webpack和webpack-dev-server。

# 全域性安裝依賴.
npm install mocker-api -g
# 執行服務
mocker ./mocker/index.js
複製程式碼

或者您可以將 mocker-api 在當前專案安裝，配置執行指令碼命令。

{
  "name": "base-example",
  "scripts": {
+    "api": "mocker ./mocker"
  },
  "devDependencies": {
+    "mocker-api": "^1.6.4"
  },
  "license": "MIT"
}
複製程式碼

在 Webpack 中使用

要在你的 Webpack 專案中使用 api mocker，只需將設定選項，新增到你的 webpack-dev-server 選項中即可：

改變你的配置檔案，告訴dev伺服器在哪裡查詢檔案：webpack.config.js。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
+ const apiMocker = require('mocker-api');
+ const mocker = require('./mocker');

module.exports = {
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  devtool: 'inline-source-map',
+ devServer: {
+   ...
+   before(app){
+     apiMocker(app, path.resolve('./mocker/index.js'), {
+       proxy: {
+         '/repos/*': 'https://api.github.com/',
+         '/:owner/:repo/raw/:ref/*': 'http://127.0.0.1:2018'
+       },
+       changeHost: true,
+     })
+   }
+ },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Development'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
複製程式碼

讓我們新增一個指令碼來輕鬆執行開發伺服器：

修改 package.json

{
  "name": "development",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --progress --watch",
+   "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.4",
    "csv-loader": "^2.1.1",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.29.0",
    "style-loader": "^0.18.2",
    "webpack": "^3.0.0",
    "xml-loader": "^1.2.1"
  }
}
複製程式碼

執行下面命令，跑起來，通過工具測試一下你模擬的API是否能返回結果。

npm run start
複製程式碼

Express 中使用

const express = require('express');
+ const path = require('path');
+ const apiMocker = require('mocker-api');

const app = express();

+ apiMocker(app, path.resolve('./mocker/index.js'))
app.listen(8080);
複製程式碼

相關文章