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

@m_shine_ray/cli-sf

v0.0.1

Published

Command Line Interface Of Single Function

Readme

cli-sf

CLI of single function

用途

  • sf dir-tree # 生成目录结构书 (项目模板选择工具)方便开发人员根据业务选择对应的前端基础代码(脚手架)
  • sf parsewxhtml # 精简微信公众号文章
  • sf lint
  • sf md
    • readme
  • sf git
    • .gitignore
    • .gitkeep
  • sf file
  • sf dir
  • sf check(项目检测工具)

使用说明

    npm i -g @a2z/cli-sf #全局安装
    
    sf # 查看支持等命令
      Commands:
        parsewxhtml    parse wx html
        info           print debugging information about your environment
        dir-tree       generate directory tree under current directory

run && debug cli

  - 1、npm发布后全局执行
      * npm adduser
      * npm publish --access public

    2、在cli内部调试
      * cd cli-sf
      * npm run sf  

rules

Knowledge Point

fecli check rules(TODO)

  • 解决方案
    • 基于eslint扩展
    • 基于directory-tree扩展
  • 规则详情
    • 校验目录结构
      • 是否缺失
      • 是否新增
      • 是否目录层级过深
    • 校验文件
      • 是否缺失
      • 校验文件内容
        • 是否被篡改
        • 是否缺失
        • 涉及的文件 readme.md package.json
    • 校验命名规范
      • 文件夹命名
      • 文件命名
      • vue组件命名
    • node生成目录结构数组
      • 忽略文件夹

      • 忽略文件

      • 递归遍历

      • 生成数组

Log

v0.0.3

  • add--命令--dir-tree(生成目录结构树)
    • 支持.js、.css、.vue、.html文件注释解析
    • 注释约定 文件第一行
      • /**@desc 注释内容*/
      • HTML注释<!-- @desc 注释内容-->

v0.0.2

v0.0.1

  • init

TODO

  • 完善命令
    • 校验规范相关命令
    • 校验开发环境
      • node版本
      • vue-cli版本
      • webpack版本
  • 完善模板
    • 如何动态注入到项目中?

Q&A

Q1: 如何实现生成一个文件(.md),文件内容是项目目录树状结构及对应的目录或文件说明, 能忽略统计目录(wwwroot、.idea、dist、node_modules、test)、文件(*.png) 参考:

目录结构

|--.
  |--LICENSE
  |--README.md
  |--bin
  |  |--sf.js
  |--directoryTreeDesc.md
  |--lib
  |  |--rules
  |  |  |--base.json
  |  |  |--config
  |  |  |  |--dir-structure.json
  |  |--util
  |  |  |--checkUtils.js
  |  |  |--directory-tree.js
  |  |  |--enhanceErrorMessages.js
  |  |  |--fileUtils.js
  |  |  |--note.js
  |  |  |--utils.js
  |--package-lock.json
  |--package.json
  |--src

Q2: 目录层级

 根目录|--
一级目录  |--
二级目录    |   |--

Q3: 生成的目录树,顺序与真实的顺序不一致

Q4: 根目录名称无法获得

Function