全新的架构:Mock集成框架
如果你有以下场景
- 开发web页面,苦苦等待后端调试
- 苦恼在APP调试移动H5页面(why?你可能使用到JSBridge)
- 要写很多非主业务和衍生文件进行单元测试
- 你的mock api需要侵入关联业务 or 手动开关mock
不妨尝试接入 SWAP
,可以帮助您解决以上的问题。
客观分析开发一个移动H5需求的时间(某视APP榜单):
- 业务代码开发与调试:2D
- 与后端联调:1D
- 编写单元测试:2D(90%覆盖率)
- 总时长:5D
使用了SWAP之后:
- 业务代码开发与调试:1D
- 与后端联调:0D
- 编写单元测试:1D
- 编写MockData: 0.5D
- 总时长:2.5D
- 无侵入模拟API
- 熟悉的Node Response用法
- 支持jest,可以让你编写更少的单元测试
- 中心化Mock Data
- 支持JSBridge Mock
- 需要在
https
或localhost
的域名中操作,自定义https域名可以利用whistle
- webpack需要4.40.0以上版本
- 如果使用webpack 5 需要额外引用
node-polyfill-webpack-plugin
npm install rocket-swap
- 如果项目有使用webpack
4.40.0以上版本
// webpack.config.js // const NodePolyfillPlugin = require('node-polyfill-webpack-plugin'); // webpack 5 需要引入 const SwapWebpackPlugin = require('rocket-swap/webpackPlugin'); ... module.exports = { ... plugins: [ // new NodePolyfillPlugin(); //webpack 5 需要引入 new SwapWebpackPlugin(); ] }
- 非webpack项目,请执行cmd,把swapSW.js生成到项目public目录
npx swap init <xxxxxxx>
xxxxxxx 代表 public地址,如果是create-react-app,则如下
npx swap init public
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// 引入swap
if (process.env.NODE_ENV === 'development') {
const swap = require('rocket-swap')
const mockData = require('../mock')
swap.swapInit({
mockData
})
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// mocker.js
module.exports = {
'GET /list': (req, res, ctx) => {
return res(
ctx.status(200),
ctx.json({
code: '201',
}),
)
}
}
- 云端API接入
- 构建工具Plugin
感谢大家的贡献:
Rocketliu |