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

v1.4.3

Published

CLI for mip 2.0

Downloads

23

Readme

mip 2.0 CLI npm package node

Command Line Interface for MIP 2.0.

Installation

Prerequisites: Node.js (>=8.x), npm version 3+ and Git.

$ npm install -g mip

Usage

创建项目

$ mip init

新增一个组件

在项目根目录运行 mip add 命令,即可快速添加一个新组件

# 快速添加名为 mip-new 的组件
$ mip add mip-new

# 使用 -f 或 --force 参数强制覆盖同名组件
$ mip add mip-new -f

启动调试服务器,在项目根目录运行

$ mip dev

Example:

# 可使用 ——port 指定端口
$ mip dev --port 8888

组件和页面校验

集成到 cli 工具中的校验分为三种:

  • 组件校验
  • 页面校验
  • npm 白名单校验
$ mip validate

Example:

# 组件校验
$ mip validate components
$ mip validate -c components

# 页面校验
$ mip validate -p page.html

# npm 白名单校验
$ mip validate -w path-to-project

构建组件,在项目根目录运行

$ mip build

生成 Service Worker

mip CLI 提供了 sw 命令,帮助开发者更简单快速地生成 Service Worker,支持离线可用等特性。

# 在项目根目录运行
$ mip sw

默认情况下,将导出 Service Worker 文件到 dist/sw.js,并对静态资源(如 js,css)及 html 文档进行缓存,实现页面的离线可用。

mip sw 命令提供了选项:

-o, --output // 指定 sw 导出路径,如 mip -o output/service-worker.js
-c, --config // 指定配置文件路径,默认使用项目根目录 mip.config.js

除此之外,我们可以在 mip.config.js 中增加 serviceWorker 配置项,对 Service Worker 进行进一步的配置,如预缓存列表、动态缓存策略、skipWaitingclientsClaim 等。

module.exports = {
  dev: {/*...*/},
  serviceWorker: {
    cacheId: 'mipuser',
    skipWaiting: true,
    clientsClaim: true,
    runtimeCaching: [],
    globPatterns: [],
    globIgnores: []
  }
}

更多的配置选项可以参考 Workbox 配置项

常用插件

本地启动 SF 调试环境

$ mip sf

运行命令后,会在本地启动一个服务器,可以通过 http://localhost:8210/sf 进行访问,对页面嵌入 SF 的情况进行调试和验证。

详情可以查看插件项目仓库 mip-cli-plugin-sf