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

mockx

v1.0.0

Published

Generate random data(by mockjs tpl), middleware.Can use local, js data and fetch remote

Downloads

53

Readme

mockx

mockx - 一个nodejs编写的http|https代理服务器。只需简单的配置就能实现复杂的代理需求。 可以用来做数据mock,线上资源代理等。

Features:

  • 替换远程请求到本地文件
  • 支持反向代理
  • 模拟慢速网络
  • 可修改请求头和响应头
  • 自动创建证书
  • 支持HTTP和HTTPS

Table of Contents

  • 工作原理
  • Example & Usage
  • Use Cases
    • webpack本地开发
    • 替换线上的某个url下内容
    • 同时代理一批接口
    • query不同返回不同内容
    • 指定发送的headers或者返回的headers
  • Options说明
  • Options.rule说明
    • 请求有关的字段
    • 响应有关的字段
    • 辅助的字段

工作原理

time ==>
-----------------------
server:       4
-------------/-\-------
hoxy:       3   5
-----------/-----\----
hosts:    2       \
---------/---------\---
client: 1           6
  1. 客户端发起请求
  2. hosts文件返回IP 127.0.0.1
  3. 到监听80端口的mockx服务,查找匹配的规则再转给服务器或本地
  4. 服务器端收到请求并发送响应数据
  5. mockx接收并加工数据
  6. 客户端收到响应内容

注:

  • mockx是运行在本地80端口的服务器,即127.0.0.1:80
  • mockx在有域名映射时,会修改hosts文件添加域名映射到127.0.0.1

Example & Usage

完整的项目请见mockx-example

项目的目录结构如下

1 安装mockx

npm install mockx

2 启动mockx

在项目根目录下执行sudo node_modules/.bin/mockx

因为mockx是监听在80端口,因此要使用sudo权限。

如果第一次执行,会在项目根目录下创建mockx.config.js,即mockx的配置文件。

3 修改mockx.config.js配置文件

module.exports = {
	// 
	// 需要代理的域名
	// 
	domains: [
		's.taobao.com'
	],

	// 
	// mock文件夹
	//
	mockDir: './mock',

	// 
	// 所有的映射规则,详见后面rule编写规则
	// 
	rules: [

		// 映射本地json
		{
			pathname: '/mockJSON',
			json: 'jsonfile.json'
		}, 

		// 映射本地的静态文件
		{
			pathname: '/mockFile',
			file: 'file.html' // file静态资源,可以是js,css,html
		}, 

		// 映射一个远程的内容
		{
			pathname: '/mockRemote',
			remote: 'http://www.taobao.com' // remote需要写全,把协议http:带上
		}
	]
}

4 访问

http://localhost/mockJSONs.taobao.com/mockJSON都将返回mock/jsonfile.json内容

Use Cases

下面默认的配置是这样的,因此只写了rules

module.exports = {
	// 需要映射的域名
	domains: [
		
	],

	// 相对项目根目录下的mock文件夹
	mockDir: './mock',

	// 所有的映射规则,详见后面rule编写规则
	rules: [
	
	]
}

webpack本地开发

一般webpack开发是在8080端口,通过localhost:8080/index.html来调试。

当需要mock/api/message/list这样的接口时。我们的思路是都通过localhost来访问,未命中的地址再转发到localhost:8080

因此我们就通过访问localhost/index.html来测试。

{
	rules: [
	{
		pathname: '/api/message/list',
		file: 'messageList.json'
	},	
	{
		pathname: /.*/,
		host: 'localhost',
		remote: 'localhost:8080$0'
	}]
}

localhost/index.html会转发到localhost:8080/index.html localhost/api/message/list会转发到mock/messageList.json

替换线上的某个url下内容

替换线上的某个url下内容,排查线上的bug。如https://s.taobao.com/search?q=40530

注:

  • 此时需要在domains里添加一条hosts.taobao.com,mockx启动时会自动在hosts文件中添加一条127.0.0.1 s.taobao.com
{
	domains: [
		's.taobao.com'
	],
	rules: [
	{
		pathname: '/search',
		file: 'search.html'
	},	
	{
		pathname: /.*/,
		remote: 'origin' // origin即原封不动转发,访问`s.taobao.com/api/message`会转到线上真正的`s.taobao.com/api/message`服务
	}]
}

同时代理一批接口

/api/message/list/api/message/create/api/message/get这样一批接口需要代理。我们的pathname支持正则,同时在响应字段中有$n代表正则里的()分组正则表达式在url里匹配到的内容。

{
	rules: [
	{
		pathname: /\/api\/message\/(.*)/i,
		file: '$1.html'
	}
}

访问/api/message/list会映射到本地的`mock/list.json

query不同返回不同内容

有时需要根据query不同来返回不同内容,使用query字段。

{
	rules: [
	{
		pathname: '/api/message/create',
		query: {
			title: 'xxx'
		},
		json: 'success.json'
	}, 
	{
		pathname: '/api/message/create',
		query: {
			title: 'xxxxxxxxxxxxxxxxxxxxx'
		},
		json: 'error.json'
	}]
}

指定发送的headers或者返回的headers

指定响应头,如静态资源跨域的Access-Control-Allow-Origin

指定请求头,如在本地模拟登陆的用户信息cookie

{
	rules: [
	{
		pathname: '/\/api\/message\/(.*)/i',
		remote: 'http://taobao.com/api/message/create'
		// 指定响应头
		responseHeaders: {
			Access-Control-Allow-Origin: '*'
		}
		// 指定请求头
		requestHeaders: {
			cookie: 'NID=102=W21YoOeFkN6ndgJ_ZPQfa12YpMYdLm8Oxcy_QBg5zyQILhQDDhWdWMFBeyzZQmo8FsuykQNCJezRN_WfJ9m9e644dkd9_nH1yVbk2B9LvhL8hYpufpYe39VFvfcKHBa6DzTKKeije1Adlrrf3nw36LMPkDrYA1e1xG4lV4Inr05TCzIzQ6VJcTKudZtY27Kp; DV=UtKgBvHhB6IVLh52YHJ4EGP2UPZItwI; UULE=a+cm9sZToxIHByb2R1Y2VyOjEyIHByb3ZlbmFuY2U6NiB0aW1lc3RhbXA6MTQ5MzExMzE4ODQwOTAwMCBsYXRsbmd7bGF0aXR1ZGVfZTc6MzAyODE4MDY0IGxvbmdpdHVkZV9lNzoxMjAwMTkwNjEyfSByYWRpdXM6MTA3MjYw'
		}
	}]
}

Options说明

  • domains 需要进行代理的域名
  • mockDir 相对于根目录的mock映射文件夹,一般填入./mock
  • rules 映射的规则

Options.rule说明

请求有关的字段

  • pathname 匹配的url路径,支持正则和字符串。即标准url中的pathname一致。要以'/'开头。
  • query 匹配的get或post的数据,post字段覆盖get字段,如果填了在query也匹配时才会命中此配置。注:(note: query中k-v的value必须是字符串)
  • host 匹配的host

例如https://s.taobao.com/search?q=40530这样解析出来的几部分

pathname -> '/search' host -> 's.taobao.com' 'query' -> {q: '40530'}

响应有关的字段

  • json 映射的json文件 json文件支持mockjs
  • jsData 映射的动态执行的js文件
  • remote 映射的远程资源 映射时请写全带上协议,如http://taobao.com,如果填入origin则是原内容转发
  • file 映射的静态文件,可以是html, js, css

NOTEjson,jsData,remote,file 在一条规则中只能选其中一个

辅助的字段

  • jsonp jsonp请求,字段value是jsonp的字段名如{jsnop: 'callback'}
  • delay 延时的响应时间,毫秒单位