Webpack最简单的方式Mock API
webpack-api-mocker 是一个为 REST API 创建 mock 的 webpack-dev-server 中间件。 当您尝试在没有实际的 REST API 服务器的情况下,测试您的应用程序时,这将会很有帮助。
安装
npm install webpack-api-mocker --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
项目中使用 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('webpack-api-mocker'); + const mocker = require('./mocker'); module.exports = { entry: { app: './src/index.js', print: './src/print.js' }, devtool: 'inline-source-map', + devServer: { + ... + before(app){ + apiMocker(app, mocker) + } + }, 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 apiMocker = require('webpack-api-mocker'); + const mocker = require('./mocker') const app = express(); + app.use(apiMocker(app, mocker)); app.listen(8080);
相关推荐
-
Vue项目中使用vw实现移动端适配 框架
2019-9-17
-
mint-ui picker 三级联动实现 框架
2019-10-3
-
Kafka知识点 框架
2019-1-1
-
vue中$router以及$route的使用 框架
2018-10-18
-
解决基于TypeScript 的 RN项目相对路径引入组件的问题 框架
2019-6-8
-
移动端H5 input输入完成后页面底部留白问题 框架
2019-7-7
-
初学React高阶函数 框架
2019-9-7
-
只要三步,将koa的node服务升级到https 框架
2019-9-1
-
Vue 匿名、具名和作用域插槽的使用 框架
2019-5-3
-
业内首个 React Native转微信小程序引擎 Alita 正式发布 框架
2019-6-1