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-site

v1.0.0

Published

cli plugin for `mip2 site`

Downloads

9

Readme

对应命令 mip2 site,帮助开发者把开发插件和开发页面两部分融合,获取更好的开发体验。

为什么需要 mip2 site?

一般开发 MIP 页面需要两个部分:

  • 开发 MIP 组件 根据每个站点各自的业务需求,站长需要开发包含自身业务的 MIP 组件。

    例如某个博客站点可能需要开发一个组件 <mip-blog-list>,这个组件根据当前 URL 上的 ID 获取用户信息,从而展示他发过的博客的列表。

  • 开发 MIP 页面 根据已有的 MIP 组件(可能是内置组件,也可能是刚才自己开发的自定义组件)拼装成一个 HTML 页面。

开发组件时我们大多使用 MIP CLI 内置的 mip2 dev 启动服务器。其他还有例如 mip2 add, mip2 build 之类的专门针对组件开发的快捷方式。

但开发 MIP1 页面目前并没有单独的工具,更多的是在开发组件的项目中,随便找一个 example,把拼装各个组件的最终页面写进去,之后预览效果。这就相当于 在单测脚本中写集成测试用例,是一种失配的现象。

此外,作为一个 MIP 页面,还应当考虑到搜索环境的 SuperFrame (简称 SF) 中显示是否正常。虽然我们额外提供了 mip2 sf 命令帮助本地调试,但 需要同时打开两个 bash 并分别启动 mip2 devmip2 sf 也是反人类的

mip2 site 基于这些实际开发中的问题,主要解决了以下几个问题:

  1. 将开发组件和开发页面融合到同一个项目中,我们称为 “MIP 站点项目”

  2. 内置 SF 调试环境,不必额外启动命令

  3. 保留 mip2 本身的全部功能,例如 mip2 add, mip2 build 等均有快捷命令一一对应,无需反复切换目录。

快速开始

作为 MIP CLI 的插件,首先要求开发者全局安装最新版本的 mip2。如果没有,请运行 npm i mip2 -g 进行全局安装。

  1. mip2 site init 初始化项目

  2. cd 到项目根目录并执行 npm i

  3. mip2 site dev 启动初始项目

  4. 访问 http://localhost:8200/weather/shanghai 查看初始项目的示例页面

  5. 访问 http://localhost:8200/sf 查看 SF 线下调试环境

命令详解