npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@shymean/mock-server

v1.3.0

Published

Local mock data server setup by Koa.

Downloads

5

Readme

mock-server

为开发环境快速搭建koa服务器,只需要一个mock模板文件即可。

脚本将启动本地服务器,然后匹配mock模板内的url返回对应的数据

使用

# 全局安装
npm i @shymean/mock-server -g
# 快速启动mock服务器
mock -p 9999 -f ./_mock.js

参数说明

  • port,服务器端口号,默认7654,简写 -p
  • file,mock模板文件路径,默认./_mock.js,简写 -f

mockjs模板语法

使用该工具只需要准备一个mock模板文件,其语法参考

基础使用

其使用方式与mockjs基本类似

  • Mock.mock(url, template)
  • Mock.mock(url, method, template)
// _mock.js
// 对应的rurl会被中间件拦截,并返回mock数据
// ANY localhost:9999/
Mock.mock('/', {
    data: [],
    msg: "hello mock",
    "code|1-4": 1,
})

// 可以mock指定的请求方法
// POST localhost:9999/test
Mock.mock('/test', 'POST', {
    data: [],
    msg: "hello mock",
    "code|1-4": 1,
})

// 扩展rtype,支持jsonp形式,使用param传入对应的回调名
// GET JSONP localhost:9999/test
Mock.mock('/test', {
    type: 'jsonp',
    param: 'callbackName'
},{
    code: 0,
    msg: 'hello from mock jsonp',
    data: {
        "id|1000-9999": 1,
    }
})

// 默认回调名称 callback
Mock.mock("/test2", "jsonp", {
    code: 0,
    msg: "hello from mock jsonp2",
    data: {
        "id|1000-9999": 1,
    }
});

自定义请求头匹配

有时候某个相同的url请求,根据业务参数需要返回不同的模拟数据,因此提供了自定义匹配请求url的功能,需要在模板文件中实现Mock.parseUrl方法即可,该方法返回一个用于匹配的rurl

Mock.parseUrl = function(ctx){
    // ctx为koa上下文对象
    return 'someUrl'
}

Mock.mock('someUrl', {code: 0})

获取自定义请求详情

在某些时候需要根据请求详情(如请求参数、cookie等)返回不同的模拟数据,因此提供了函数模板,其中Koa请求上下文将通过参数的方式注入

Mock.mock(/auth/, (ctx) => {
    let {uid} = ctx.query
    if (uid) {
        return {
            code: 200,
            msg: 'success',
            data: {
                uid
            }
        }
    } else {
        return {
            code: 401,
            msg: 'no uid',
        }
    }
})

注:该功能看起来与上面提供的parseUrl方法比较类似,但区别在于:parseUrl主要用于批量指定解析rurl的模式,而函数模板主要用于针对单个url的请求动态返回模拟数据

loadModule

由于内部使用eval执行模板文件,因此在模板文件中使用require导入的其他模块(如很大一段JSON模拟数据)路径可能存在问题,

解决办法是使用process.cwd()+path.resolve显式指定模块路径

const path = require('path')
let list = require(path.resolve(process.cwd(), './example/list.json'))

Mock.mock(/list/, {data:list})

因此,工具内置了Mock.loadModule方法,用于导入其他模块

let list = Mock.loadModule('./example/list.json')
Mock.mock(/list/, {data:list})

nginx配置

为了避免在业务代码中使用localhost域名,最佳实践方案是开发时将业务域名(如xxx.test.com)指向本地

127.0.0.1 xxx.test.com

然后通过nginx配置反向代理到mock服务器

server {
    listen 80;
    server_name xxx.test.com;

    # wireless_j项目中的活动接口
    location /j/cn/control/api {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:9999; # mock -p 9999 指令启动的服务器的端口号
    }
}

Feature

  • [x] 与mockjs浏览器端共用同一套mock模板,方便迁移和代码维护
  • [x] 支持jsonp请求
  • [x] 数据模板热更新,修改模板文件后,将自动重启服务器
  • [x] 根据请求信息,动态返回模板数据

Todo

  • [ ] 支持映射本地文件,比如样式表、图片等