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 🙏

© 2026 – Pkg Stats / Ryan Hefner

chenfangdemo

v1.0.0

Published

description

Downloads

8

Readme


This project was bootstrapped with firesoon-cli.

路由跳转

  • 面包屑上的点击和添加
// Breadcrumb.tsx

// 点击 根据idx截取 保留剩下的路由
 dispatch({
    type: 'breadcrumb/to',
    payload: {
      targetMenu: menu, // utils/menu.tsx IMenu类型
      idx,
    } 
});

// 添加(将直接添加到当前面包屑后)
dispatch({
  type: 'breadcrumb/to',
  payload: {
    id: 'menuId',
    query: { ... },
  }
})
  • 面包屑整体变更

在models/global.ts里对路由变化做了判断patchUrl, findPreviousMenu(pathname)根据路由关系重新生成breadcrumbMenus

utils/utils.ts routePush

// 例子 pages/home/Home.tsx
const linkToDept = (type) => {
  routerPush('dept', {
    query: {
      activeType: type,
     }
  });
};

Restful

默认post请求,可根据实际情况修改

以下展示model中使用

services

// 如果是默认的post
export function postData(data) {
  return request('/info', {
    prefix: user,
    data,
  });
}

// get请求
export function getInfo(id) {
  return request.get('/info', {
    prefix: user,
  });

  // get某一个 /info/infoID
  // return request.get(`/info/${id}`, {
  // prefix: user,
  // });
}

TODO

  • [ ] 封装对/user/:id的支持

FAQs

src/components会被引用它的页面重复打包css内容, 通过配置.umirc.ts/splitChunks打包成一个css文件解决该问题。如果css打包后过大,可参考extract-css-chunks-webpack-plugin

extract css 进行分包或者删掉chainWebpack的配置

breadcrumb为什么还要存到sessionStorage里?

会有直接添加到面包屑后的子项(产品设计的混乱跳转), 路由可能不符合findPreviousMenu查找规范, 存到storage里避免刷新后面包屑出现错误。

初始化的项目目前使用的是无锡费率法的菜单接口

初始化的项目里注释了权限菜单获取的相关代码,可根据需求使用

  • 删除app.ts
- authMenu.init = menu;
- oldRender();

postMenuRole方法取消注释。

  • 取消patchRoutes方法注释
export const authMenu = {
  tree: [], // --> 修改为静态的menu
  searchTree: [], // --> 使用treeToArray转化静态的menu
  ...
}
utils/constant.ts中修改首页的id,默认'home'
使用 不显示?

为减小打包体积,对antd icons采用了按需引入的社区解决方案,对于使用的<Icon type='xxx' />需要在src/icons里手动导入

免密登录不成功?

app.ts有对路由的请求,如果有免密登录的需求,对该需要改造