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

mip-cli-plugin-sf

v1.0.3

Published

Enable offline SF

Downloads

11

Readme

项目背景

MIP 页面在上线到搜索结果页之后,需要嵌入在 SuperFrame (简称 SF) 环境下运行。因此在开发后期,为了保证 MIP 页面的效果在上线后能保持一致,有必要创建一个线下 SF 调试环境并运行目标页面。

在 MIP 官网 https://www.mipengine.org/debug 已经有这样一个线下 SF 调试环境,但有一个最大的问题:MIP 官网是 https 协议,当使用线下调试并且目标页面地址是 http 协议或者干脆 localhost 时,浏览器会阻挡请求,因为从 https 请求 http 是不安全的,影响了正常调试。而事实上,http 协议或者 localhost 又是开发时最最常用的情况。

为了避开这个问题,本项目会在开发者本地启动一个服务。因为本身就启动在 localhost,因此无论是 http 还是 https 都是可以正常运行的。

快速开始

  1. 全局安装 mip2 命令行工具

    npm i mip2 -g

  2. 启动线下 SF 调试环境

    mip2 sf

  3. 使用浏览器访问 (默认端口 8210)

    http://localhost:8210/sf

  4. 在 URL 输入框 (第一个) 输入目标页面的 URL。切记带上协议头,即 http 或者 https

    例如 http://localhost:8111/xxx

  5. 点击最下方的“出发测试”按钮

分享链接

有时候一个 MIP 页面是由多位开发者共同完成的,所以可能会有开发者 A 想把调试链接分享给开发者 B 的情况,直接分享 http://localhost:8210/sf 的话还需要 B 重新在 URL 框中输入地址,略微麻烦。因此这里我们还支持了 url 参数。

你可以直接分享 http://localhost:8210/sf?url=xxxx 给你的同事,当然前提是他也在 localhost 启动着服务。或者如果你们处于同一个网段,你把自己的内网 IP 地址替换 localhost 分享给同事,也是一个可行 & 简便的方案。

一些解释

  • 线上/线下测试

    MIP 页面在上线后,会由 mip-cache 系统把页面及其使用的资源全部转存到 CDN 中,并生成一个额外的 URL,我们称之为 CACHE URL,与之相对,原来的 URL 就称为 原始 URL

    举个例子,开发者开发了一个站点,入口页面为 https://www.somesite.com/mip,这就是 原始 URL。 上线并提交审核,同意收录之后,mip-cache 会把这个站点转存到 CDN 中,生成一个类似 https://www-somesite-com.mipcdn.com/c/s/xxx 之类的一个 URL,这就是 CACHE URL。注意到两个 URL 的域名并不相同,但当中有一些转化规则,可以让两者互相转化。这个规则开发者并不需要过多关心。

    所谓线上测试,就是使用 SF 环境打开 CACHE URL,因此主要针对上线之后的站点。而所谓线下测试,则是使用 SF 环境打开原始 URL,因此主要针对上线之前,开发状态的站点。开发者应该大部分情况使用的是线下测试。

    使用线上测试时, 会检查当前域名是否是百度域 (*.baidu.com),如果不是,会返回 403 阻止请求。因此想使用线上测试时,使用 localhost 是不行的。开发者需要配置 host,把例如 test.baidu.com 指向 127.0.0.1,之后使用 test.baidu.com:8210/sf 进行访问才可以正常显示页面。

  • 目标页面的 LOGO URL 和标题

    在调试页面,除了 URL 输入框和最后的测试按钮之外,当中还有两个选填框。这是为了在点击测试,到实际展现页面之前,中间那个 SF 的 loading 页面上显示 LOGO 和标题所用的。之所以选填,也是因为对实际测试影响很小,不追求完美的开发者可以忽略。

其他参数

  • 指定端口号

    mip2 sf -p 8080

  • 启动后自动打开网页

    mip2 sf -o