为什么要使用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',
      }),
    )
  }
}

展望

• 云端API接入
• 构建工具Plugin

Contributors

感谢大家的贡献: