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

grunt-connect-proxy-mock

v1.0.7

Published

Grunt Dev Server 的 Mock 与 Proxy 中间件

Downloads

5

Readme

grunt-connect-proxy-mock

gruntDev Server提供了

  1. Mock功能 — 既能mock普通的Restful API,也能伪装WebSocket Server推送ws假数据。
  2. Proxy功能 — 额外配备了对真实后端响应数据结果集的篡改能力。

的中间件。

用法概述

npm i -D grunt-connect-proxy-mock安装之后,不需要显式地向Gruntfile上下文导入该插件。而仅需向grunt任务清单插入configureProxyMock任务。其位置在configureProxies之后与connect之前。例如,

    grunt.registerTask('serve', function (target) {
        grunt.task.run([
            'configureProxies:serve',
            // 这里是插入点
            'configureProxyMock:livereload',
            'connect:livereload'
        ]);
    });

grunt-contrib-connect插件配置结点connect下的自定义任务配置子节点内(例如,任务为livereload的配置结点),添加三个新配置节点webSocketMockRouteRuleswebMockRouteRuleswebProxyRouteRules

{
    connect: {
        livereload: {
            // WebSocket Mock Server 的路由清单
            webSocketMockRouteRules: [..., {
                //【必填】监听 WebSocket 请求的 url 路径
                pathname: string,
                //【可选】WebSocket 连接成功后的回调函数
                onConnection: (ws, wss) => void,
                //【必填】当收到来自网页端 WebSocket 推送消息时的回调函数
                // - 在 onMessage 回调函数体内,以 ws.send(string) 成员方法回发消息给网页端。
                onMessage: (message, ws, wss) => void,
                //【可选】WebSocket 连接失败时的回调函数
                onError: (err, ws, wss) => void
            }, ...],
            // Web Mock Server 的路由清单
            webMockRouteRules: [..., [
                //【必填】监听 HTTP 请求的全大写方法名
                method, 
                //【必填】监听 HTTP 请求的 url 路径。而且,支持
                // - 路径参数       req.params 
                // - 查询字符串参数 req.query
                // - 表单参数       req.body
                pathname, 
                //【必填】Mock Server 中间件反复给网页端的假数据
                // - 在回调函数内,不需要显式地 res.send() 回发数据集。将回发消息作为函数返回值返回即可
                object | (req, res) => object
            ], ...],
            // Web Proxy Server 的路由清单
            webProxyRouteRules: [..., [
                //【必填】监听 HTTP 请求的全大写方法名
                method, 
                //【必填】监听 HTTP 请求的 url 路径。
                pathname, 
                //【可选】监听 HTTP 请求的 url 查询字符串参数
                // - 若任务,必须全部出现在被拦截的请求体内
                query, 
                //【必填】真响应数据集的篡改函数
                // - buffer 内容需手工转为字符串,以备篡改使用。
                // - 在回调函数内,不需要显式地 res.send() 回发数据集。将回发消息作为函数返回值返回即可
                (buffer: Buffer, req, res) => string | Buffer
            ], ...]
        }
    }
}

开启Proxy Dev Server中间件的先决条件

第一,在宿主工程内,与grunt-connect-proxy-mock依赖项平级安装peer dependency依赖项grunt-connect-proxy@^0.2.0

第二,在connect中相同的任务配置结点下,给grunt-connect-proxy插件添加配置结点proxies

{
    connect: {
        livereload: {
            proxies: [..., {
                //【必填】监听 HTTP 请求的 url 路径。
                context: string,
                //【必填】转发给后端真实服务的主机域名
                host: string,
                //【必填】转发给后端真实服务的端口号
                port: number,
                //【可选】转发后端真实服务是否是 ssl 的
                https: boolean
            }, ...]
        }
    }
}

完整的Gruntfile配置例程

{
    // 
    // 供 grunt-connect 插件的配置结点
    //
    connect: {
        livereload: {
            // 
            // 供 grunt-connect-proxy 插件的配置结点
            //
            proxies: [..., {
                //【必填】监听 HTTP 请求的 url 路径。
                context: string,
                //【必填】转发给后端真实服务的主机域名
                host: string,
                //【必填】转发给后端真实服务的端口号
                port: number,
                //【可选】转发后端真实服务是否是 ssl 的
                https: boolean
            }, ...],
            // 
            // 供 grunt-connect-proxy-mock 插件的(多个)配置结点
            //
            // WebSocket Mock Server 的路由清单
            webSocketMockRouteRules: [..., {
                //【必填】监听 WebSocket 请求的 url 路径
                pathname: string,
                //【可选】WebSocket 连接成功后的回调函数
                onConnection: (ws, wss) => void,
                //【必填】当收到来自网页端 WebSocket 推送消息时的回调函数
                // - 在 onMessage 回调函数体内,以 ws.send(string) 成员方法回发消息给网页端。
                onMessage: (message, ws, wss) => void,
                //【可选】WebSocket 连接失败时的回调函数
                onError: (err, ws, wss) => void
            }, ...],
            // Web Mock Server 的路由清单
            webMockRouteRules: [..., [
                //【必填】监听 HTTP 请求的全大写方法名
                method, 
                //【必填】监听 HTTP 请求的 url 路径。而且,支持
                // - 路径参数       req.params 
                // - 查询字符串参数 req.query
                // - 表单参数       req.body
                pathname, 
                //【必填】Mock Server 中间件反复给网页端的假数据
                // - 在回调函数内,不需要显式地 res.send() 回发数据集。将回发消息作为函数返回值返回即可
                object | (req, res) => object
            ], ...],
            // Web Proxy Server 的路由清单
            webProxyRouteRules: [..., [
                //【必填】监听 HTTP 请求的全大写方法名
                method, 
                //【必填】监听 HTTP 请求的 url 路径。
                pathname, 
                //【可选】监听 HTTP 请求的 url 查询字符串参数
                // - 若任务,必须全部出现在被拦截的请求体内
                query, 
                //【必填】真响应数据集的篡改函数
                // - buffer 内容需手工转为字符串,以备篡改使用。
                // - 在回调函数内,不需要显式地 res.send() 回发数据集。将回发消息作为函数返回值返回即可
                (buffer: Buffer, req, res) => string | Buffer
            ], ...]
        }
    }
}