Webpack最简单的方式Mock API

2018-02-09 12:46:44来源:segmentfault作者:小弟调调人点击

分享

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);

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台