Webpack最简单的方式Mock API

TalkingData 发布于2019-08-26 11:41 / 2613人阅读

摘要：是一个为创建的中间件。当您尝试在没有实际的服务器的情况下，测试您的应用程序时，这将会很有帮助。可以是或者函数。模拟代理变得简单。让我们添加一个脚本来轻松运行开发服务器修改运行下面命令，跑起来，通过工具测试一下你模拟的是否能返回结果。

webpack-api-mocker 是一个为 REST API 创建 mock 的 webpack-dev-server 中间件。当您尝试在没有实际的 REST API 服务器的情况下，测试您的应用程序时，这将会很有帮助。

安装

npm install webpack-api-mocker --save-dev

使用

定义API，假设我们讲API放到一个独立文件 mocker/index.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 项目中使用 api mocker，只需将设置选项，添加到你的 webpack-dev-server 选项中即可：

改变你的配置文件，告诉dev服务器在哪里查找文件：webpack.config.js。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
+ const apiMocker = require("webpack-api-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/",
+       },
+       changeHost: true,
+     })
+   }
+ },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Development"
    })
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  }
};

模拟API代理变得简单。

{
  before(app){
+   apiMocker(app, path.resolve("./mocker/index.js"), {
+     proxy: {
+       "/repos/*": "https://api.github.com/",
+     },
+     changeHost: true,
+   })
  }
}

让我们添加一个脚本来轻松运行开发服务器：

修改 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 path = require("path");
const express = require("express");
+ const apiMocker = require("webpack-api-mocker");

const app = express();

+ apiMocker(app, path.resolve("./mocker/index.js"))
app.listen(8080);

GPU服务器海外云主机最简单的算法最简单的爬虫最简单的webrtc 最简单的rxjava

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107356.html

前端开发如何做好本地接口模拟

摘要：前端开发如何做好本地接口模拟之前有写过一篇本地化接口模拟前后端并行开发，讲到过本地接口模拟，但不太细致。有哪些途径本地接口模拟一般分为工具层面和代码层面。因为本地接口模拟功能主要是针对的返回值为格式的异步请求，所以这种方式主要用文件。前端开发如何做好本地接口模拟之前有写过一篇本地化接口模拟、前后端并行开发，讲到过本地接口模拟，但不太细致。这次细细的说说本地接口模拟。 1. 有什么...

ACb0y 2019-08-23 14:31 评论0 收藏0
Webpack 爱与恨

摘要：关于标题，为什么是爱与恨因为在刚出来的时候，我并不是坚定的支持者，有很多地方用起来不方便，设计不合理。用户只有首次访问需要下载全部静态资源，以后的访问都直接使用缓存资源。首先，在中添加字段，当为时，则开启服务。例如请求的是则返回中的数据。关于标题，为什么是爱与恨？因为在 webpack 刚出来的时候，我并不是坚定的支持者，有很多地方用起来不方便，api 设计不合理。随着 webpa...

HmyBmny 2019-08-20 16:47 评论0 收藏0
webpack4+vue2+axios+vue-router的多页+单页混合应用框架

摘要：适用于主要入口页面生成多页，子页面和次要页面使用单页形式的项目。文件用来存放固定的数据，而文件可更加自由的处理并返回数据。 VUE2的单页应用框架有人分享了，多页应用框架也有人分享了，这里分享一个单页+多页的混合应用框架吧，node.js写了一个简单的mock服务也集成在里面，整体初现雏形，还有很多需要优化和改善的地方。。。项目结构 │ ├─build ...

whatsns 2019-08-23 11:44 评论0 收藏0
手摸手，带你用vue撸后台系列五(v4.0新版本)

摘要：同时增加了单元测试，使用了，增加了可视化配置权限，增加了自定义布局等等，优化了原先的权限方案，支持不刷新页面更新路由等等功能。虽然它的初衷是为了单元测试的，但正好满足了我们的需求。它会重写浏览器的对象，从而才能拦截所有请求，代理到本地。前言 vue-element-admin 从 2017.04.17提交第一个 commit 以来，维护至今已经有两年多的时间了了，发布了四十多个版本，...

MonoLog 2019-08-26 13:43 评论0 收藏0
手摸手，带你用vue撸后台系列五(v4.0新版本)

摘要：同时增加了单元测试，使用了，增加了可视化配置权限，增加了自定义布局等等，优化了原先的权限方案，支持不刷新页面更新路由等等功能。虽然它的初衷是为了单元测试的，但正好满足了我们的需求。它会重写浏览器的对象，从而才能拦截所有请求，代理到本地。前言 vue-element-admin 从 2017.04.17提交第一个 commit 以来，维护至今已经有两年多的时间了了，发布了四十多个版本，收获了三...

graf 2019-05-21 19:33 评论0 收藏0