Rocket-swap NPM

为什么要使用SWAP

如果你有以下场景

开发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

1.安装依赖包

npm install rocket-swap

2.根据项目构建方案

如果项目有使用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
```

3.项目中引用

// 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',
      }),
    )
  }
}