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

qn-proxy

v1.0.2

Published

千牛开发代理服务,在纯web种享受开发乐趣

Downloads

22

Readme

qn-proxy

将客户端能力以proxy服务进行透出,无论pc/移动端开发都可依赖于此服务从而脱离真机环境,尽情享受在纯web浏览器开发的乐趣吧!

解决的问题

  1. 内置webview无法支持主流技术栈调试插件,且关于性能、资源等监控功能严重缺失,直接影响到插件体验瓶颈的发现及排查优化。
  2. 开发依赖虚拟机/真实端环境,经过与大量开发者的沟通,其中90%的场景可以脱离端环境依赖。设备开支大,资源占用高,开发调试环境支持能力弱已经严重影响到成本和生产效率。
  3. 移动端开发强依赖于手机真机调试,而QAP体系兼容h5,native,却无法在纯web开发。

如何使用

step1 资源引入

目前支持两种形式,可以按照项目类型进行选择

// cdn资源,适合传统项目直接引入
<script src="//g.alicdn.com/qn/qn-proxy-server/{请使用当前npm包版本}/proxy.js"></script>

// npm包支持,适合工程化项目
tnpm install -S qn-proxy

step2 使用proxy


// cdn资源使用方式
// 直接暴露全局QN对象

QN.ajax({
    ...
})

QN.top.invoke({
    ...
})

// npm包使用方式

import QN from 'QAP-SDK'; // 常规调用方式
import QN from 'qn-proxy'; // 现在只需要变更掉sdk基础对象引用,其余结构完全不需要改变
import {qap as QN} from 'qn-proxy'; // QAP应用的使用方式

QN.ajax({
    ...
})

QN.top.invoke({
    ...
})

step3 链接远程服务

远程服务器使用手册

启动本地开发环境,假设你的开发地址为 http://127.0.0.1:8899/demo/index.html,则你需要手动添加serv信息,最终url为http://127.0.0.1:8899/demo/index.html?servurl=30.10.1.182

参数解释

servurl: 远程代理服务地址,不填写为默认值,指向127.0.0.1(一般需要填写) servport: 远程代理服务端口,不填写为默认值3001(非必填)

step4 验证配置

到这里,你应该已经接入到proxy代理服务中,请务必确定“远程service开启”,“本地无任何手动控制环境的逻辑”,代理成功后,你可以在浏览器直接进行开发,如果console中出现workbench is not defined等提示,那说明没有替换完整

实现

本项目实现用户代理端,proxy对象可以根据用户入参,逐一枚举出调用层级信息,自动适配所有api调用方式。

底层库依赖 u-proxy

通信设计

QQ20170721-232716.png 454171b5a239fbb7.png

拓扑图

2e421519bbae4f6a.png