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

base-layout-cli

v1.0.1

Published

Base Layout Component自定义脚手架

Readme

自定义脚手架

目前在市面上存在很多脚手架,如:create-react-app、vue-cli。我们可以通过一行简单的命令,就能创建一个基本的项目工程,大大的提高了开发效率。但是我们会面临一个问题,除了脚手架帮我们创建好的项目框架,我们的项目总有需要定制化的配置,比如我们需要引入我们想要的 elementUI 框架,引入 axios 相关的工具类完成 http 请求等。我们不可能每次开启新项目都再配置一遍吧,这太劳神费力了,这也就出现了本脚手架。

本地测试

cd basecli
npm link

看一下各个命令效果

basecli -h
basecli -V

CLI 的运行原理

  • 创建动态链接库,暴露全局 cli 命令

    如果要暴露一个全局的命令,首先需要在 package.json 文件中编写一个 bin 命令,当前示例指向 bin 目录下的 basecli.js 文件。

"bin": "bin/basecli.js"
  • 读取并解析命令行参数

    读取命令行参数其实非常简单,使用 program.argv 获取

  • 提供用户可选的配置项

    根据用户的选择,创建不同类型的项目模板,比如是否要 typescript 支持

  • 拷贝自定义模板到本地

    一般我们会事先准备好一个项目模板,供 cli 下载

所有依赖

  • commander 实现控制台命令行问题交互;
  • inquirer 命令行中的 select 选择器
  • chalk 为控制台输出的文字着色;
  • download-git-repo 拉去 github 项目代码;
  • ora 实现控制台进度条样式;
  • figlet 生成好看的图标文字
  • lolcatjs 生成随机颜色