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

quick-fe-cli

v2.13.1

Published

前端开发工具集 - 部署项目

Readme

Quick (quick-fe-cli) - 前端开发工具集

轻量级、可扩展的 CLI 工具集,通过 SSH 将前端构建产物部署到远程服务器,支持 Windows 环境。

特性

  • 🚀 SSH 部署 - tar.gz 压缩后上传,高效传输
  • 🔨 自动构建 - 部署前自动检查依赖并执行构建
  • 📦 包管理器支持 - 自动检测 npm / pnpm / yarn,缺失自动全局安装
  • 🌐 多环境 - 开发、测试、生产独立配置
  • 动态添加 - 初始化后可随时添加新环境(quick deploy add
  • 🔀 同服务器多路径 - 一台服务器部署多个应用
  • 💾 自动备份 - 部署前自动备份,按 maxCount 自动清理
  • 🧾 构建日志追溯 - 自动生成 .quick-release 构建日志,记录本次构建对应的 Git 变更
  • 📦 日志入包 - deploy 时自动把构建日志复制到 dist/.quick-release/**,随部署包上传并进入后续备份
  • 🔁 日志提交推送 - deploy 构建日志会提交并推送到被打包项目的 Git 远程仓库
  • 一键回滚 - 快速回滚到任意历史备份版本
  • 🎣 生命周期钩子 - 在任意阶段注入自定义逻辑
  • 📖 Skill 系统 - 为 AI 编码助手(Trae/Claude/Codex)安装项目使用指南
  • 🎨 彩色日志 - 基于 chalk 的终端输出和格式化表格
  • 🪟 Windows 兼容 - 中文编码自动修复(GBK → UTF-8),绝对路径支持
  • 🔌 可扩展 - 命令组设计,后续可扩展更多工具命令

快速开始

安装

npm install -g quick-fe-cli

初始化

# 交互式初始化(推荐,分步确认)
quick deploy init

# 一键生成(默认模板,快速上手)
quick deploy init -y

使用

# 部署
quick deploy dev                # 部署到开发环境
quick deploy dev,prod           # 部署多个环境
quick deploy dev -i             # 交互模式(逐步确认)

# 回滚
quick deploy rollback dev              # 交互式选择版本
quick deploy rollback dev --latest     # 回滚到最近备份
quick deploy rollback dev --version my_project_back_20260430170949

# 添加新环境
quick deploy add prod                  # 交互式添加生产环境
quick deploy add staging               # 交互式添加预发环境

# 查询
quick deploy list                     # 列出所有环境
quick deploy backups dev              # 列出备份(时间格式化显示)

# 版本发布
quick release build                   # 构建、生成版本日志、提交并打 tag,不发布 npm
quick release npm                     # 基于当前版本发布到 npm
quick release log                     # 仅生成部署日志并提交推送(不做版本变更)

# Skill 管理
quick skill list                      # 查看内置 Skill
quick skill install                   # 交互式选择 Skill 并安装到 AI 平台
quick skill install deploy            # 直接安装 deploy skill

# 其他
quick deploy init                     # 初始化配置
quick --help                          # 查看帮助
quick deploy --help                   # 查看部署命令组帮助
quick skill --help                    # 查看 Skill 命令组帮助

版本发布

首次准备

# 安装依赖(包含 release-it)
npm install

# 登录 npm
npm login

发布新版本

发布流程已拆分为两步:先构建并生成版本日志,再基于当前版本发布到 npm。

# 第一步:打包构建、生成 CHANGELOG、更新版本、Git commit/tag
quick release build

# 指定版本号类型
quick release build --major    # 2.0.0 → 3.0.0(不兼容更新)
quick release build --minor    # 2.0.0 → 2.1.0(新功能)
quick release build --patch    # 2.0.0 → 2.0.1(Bug 修复)

# 指定自定义版本号
quick release build --version 2.11.0

# 跳过构建命令 / 跳过推送
# --skip-build 仍会生成 .quick-release 构建日志,只是不执行 npm run build
quick release build --skip-build
quick release build --no-push

# 第二步:根据当前 package.json 版本发布到 npm
quick release npm
quick release npm --dry-run    # npm publish 预演

# npm script 方式(本仓库开发时可直接使用)
npm run release:build
npm run release:npm
npm run release                # 等同于 release:build + release:npm

发布流程

quick release build      # 构建 + 版本日志 + Git commit/tag
  ↓
npm run build            # 编译 TypeScript
  ↓
生成 .quick-release/build-log.json
生成 .quick-release/logs/build-YYYYMMDD-HHmmss.md
  ↓
分析 Git 提交记录         # 基于上次 tag 后的所有提交
  ↓
建议版本类型              # feat → minor, fix → patch
  ↓
确认/选择版本号           # 也可手动输入自定义版本号
  ↓
生成 CHANGELOG           # 按类型分组 + 版本摘要 + commit body 补充
  ↓
📋 CHANGELOG 预览        # ✅ 确认 / ✏️ 编辑 / ❌ 取消(可反复编辑)
  ↓
Git add + commit         # chore: release v2.1.0
  ↓
Git tag + 可选 push       # 打标签,可选择是否推送到远程
  ↓
quick release npm        # 发布当前版本到 npm

构建日志与部署追溯

每次执行 quick release buildquick deploy env 的构建阶段,都会在当前被构建项目中生成:

.quick-release/build-log.json
.quick-release/logs/build-YYYYMMDD-HHmmss.md

其中:

  • build-log.json:记录构建来源、环境、版本、构建命令、当前 commit、上次构建信息,以及本次 Git 日志 Markdown 路径。
  • logs/build-YYYYMMDD-HHmmss.md:记录上次构建到本次构建之间的 Git 提交,格式与 CHANGELOG.md 风格一致。

build-log.json 示例

{
  "source": "deploy",
  "env": "dev",
  "projectName": "my_project",
  "version": "2.10.1",
  "command": "npm run build-only",
  "cwd": "C:/A_code/my_project",
  "distPath": "C:/A_code/my_project/dist",
  "commit": "abc1234",
  "builtAt": "2026-05-07T08:30:00.000Z",
  "previousBuild": {
    "commit": "def5678",
    "builtAt": "2026-05-06T10:00:00.000Z"
  },
  "gitLog": {
    "range": "def5678..HEAD",
    "commitCount": 3,
    "mdPath": "C:/A_code/my_project/.quick-release/logs/build-20260507-163000.md",
    "relativeMdPath": ".quick-release/logs/build-20260507-163000.md"
  }
}

Markdown 日志示例

# Build dev my_project

> 构建时间:2026-05-07 16:30:00
> Git 范围:def5678..HEAD
> 1 个新功能、1 个修复

### ✨ Features

- **deploy**: 支持发布构建日志

### 🐛 Bug Fixes

- 修复 quick --version 读取错误

quick deploy env 的日志处理

quick deploy env 会额外执行以下动作:

  1. envConfig.projectDir 对应的被打包项目中生成 .quick-release/**

  2. 只提交以下文件到该项目 Git 仓库:

    .quick-release/build-log.json
    .quick-release/logs/build-YYYYMMDD-HHmmss.md
  3. 提交成功后自动推送到远程仓库。

  4. 不自动 bump 版本、不生成正式 CHANGELOG.md、不打 tag。

  5. 将构建日志复制到:

    dist/.quick-release/build-log.json
    dist/.quick-release/logs/build-YYYYMMDD-HHmmss.md
  6. 压缩 distDir 时,日志会一起进入部署包。

  7. 服务器部署目录会包含 .quick-release/**,后续该版本被备份时,备份包中也会保留对应构建日志。

如果构建日志提交或推送失败,CLI 会输出 warning 并继续部署,避免 Git 网络或权限问题阻断线上发布。

quick release log - 独立日志生成

如果你只想在业务项目中生成部署日志并提交推送,而不需要完整的版本发布或 SSH 部署,可以使用 quick release log 命令:

# 在业务项目根目录执行
cd my_project

# 使用 package.json 中的 build script,生成日志并提交推送
quick release log

# 交互模式
quick release log -i

# 跳过构建,仅生成日志
quick release log --skip-build

# 手动指定构建命令
quick release log --cmd "npm run build:prod"

# 指定产物目录
quick release log --dist dist

# 不推送到远程
quick release log --no-push

# 跳过所有确认
quick release log -y

与其他命令的区别:

  • quick release build:完整版本发布(构建 → 版本 bump → CHANGELOG → commit → tag → 可选 push)
  • quick release log:仅部署日志(构建 → 生成日志 → commit → push),不做版本变更
  • quick deploy env:完整部署(构建 → 生成日志 → 压缩 → SSH → 上传 → 部署)

quick release log 适用于只想记录构建日志并推送到 Git,而不需要版本发布或 SSH 部署的场景。

CHANGELOG 自动生成

每次发布自动生成更新内容,特性包括:

  • 自动获取提交:从上次 tag 到当前 HEAD 的所有提交(无 tag 时获取全部)
  • 版本摘要> 4 个新功能、2 个修复、1 个重构
  • 分类展示:Features / Bug Fixes / Performance / Refactoring / Documentation / Chores
  • 详细说明:自动提取 commit body 作为补充说明
  • 过滤噪声:自动排除 chore: release 提交
  • 交互式编辑:预览后选择 ✏️ 编辑,打开系统编辑器手动修改内容

CHANGELOG 示例:

## [2.5.0] (2026-04-30)

> 4 个新功能

### ✨ Features

- **git**: 修改提交逻辑 — 在createCommit函数中增加git add -A
- **chalk**: 替换kleur为chalk — 解决 Cannot read properties of undefined 报错
- 添加deploy add命令 — 支持向已有配置添加新环境
- 修复问题

发布前检查清单

  • [ ] 所有代码已提交到 git
  • [ ] npm run build 编译成功
  • [ ] quick release npm --dry-run 预览无异常
  • [ ] npm 已登录(npm whoami

配置说明

完整配置示例

// .deployrc.js
export default {
  envs: {
    dev: {
      name: 'my_project',

      server: {
        host: '${DEV_HOST}',
        port: 22,
        username: '${DEV_USER}',
        password: '${DEV_PASSWORD}',
      },

      projectDir: 'C:/A_code/my_project',
      distDir: 'dist',

      build: {
        cmd: 'npm run build-only',
        skip: false,
        packageManager: 'pnpm',
      },

      preCmd: '',
      postCmd: '',

      deploy: {
        paths: [
          { remote: '/uinnova/testDeploy', description: '主站' },
        ],
      },

      backup: {
        enabled: true,
        remoteDir: '/uinnova/testDeploy/backups',
        maxCount: 5,
        format: '{name}_back_{YYYYMMDDHHmmss}',
      },
    },

    prod: {
      name: 'my_project_prod',
      server: {
        host: '${PROD_HOST}',
        port: 22,
        username: '${PROD_USER}',
        privateKey: '${PROD_KEY_PATH}',
      },
      projectDir: 'C:/A_code/my_project',
      distDir: 'dist',
      build: { cmd: 'npm run build-only', skip: false, packageManager: 'pnpm' },
      preCmd: 'pm2 stop prod-app',
      deploy: { paths: [{ remote: '/uinnova/prod', description: '生产' }] },
      backup: { enabled: true, remoteDir: '/uinnova/prod/backups', maxCount: 10, format: '{name}_back_{YYYYMMDDHHmmss}' },
      postCmd: 'pm2 start prod-app',
    },
  },

  defaults: {
    compress: { enabled: true, level: 9 },
    upload: { retryCount: 3, retryDelay: 1000 },
    deploy: { interactive: false },
  },
}

配置字段速查

| 字段 | 类型 | 说明 | |------|------|------| | name | string | 项目名称 | | server.host | string | 服务器地址 | | server.port | number | SSH 端口 | | server.username | string | 用户名 | | server.password | string | 密码(与 privateKey 二选一) | | server.privateKey | string | 私钥路径(与 password 二选一) | | projectDir | string | 本地项目路径 | | distDir | string | 构建产物路径 | | build.cmd | string | 构建命令 | | build.skip | boolean | 跳过构建 | | build.packageManager | string | npm / pnpm / yarn | | preCmd | string | 上传前服务器命令 | | deploy.paths[].remote | string | 远程部署路径 | | deploy.paths[].description | string | 路径备注 | | backup.enabled | boolean | 启用备份 | | backup.remoteDir | string | 远程备份目录 | | backup.maxCount | number | 最大保留备份数 | | backup.format | string | 备份命名模板 | | postCmd | string | 上传后服务器命令 |

备份命名模板

format: '{name}_back_{YYYYMMDDHHmmss}'

示例: my_project_back_20260430170949.tar.gz

部署流程

quick deploy env 构建与部署流程

1. 读取 .deployrc.js,定位 envConfig.projectDir 和 distDir
2. 检测包管理器(缺失则自动全局安装)
3. 检测 node_modules(缺失则自动 <pm> install)
4. 在 envConfig.projectDir 中执行 build.cmd
5. 生成 projectDir/.quick-release/build-log.json
6. 生成 projectDir/.quick-release/logs/build-YYYYMMDD-HHmmss.md
7. 只提交 .quick-release/build-log.json 和本次 Markdown 日志到业务项目 Git 仓库
8. 将日志 commit 推送到远程仓库
9. 复制构建日志到 distDir/.quick-release/**
10. 压缩构建产物 distDir (tar.gz),此时 .quick-release 日志已进入部署包
11. 连接 SSH 服务器
12. 执行 preCmd
13. 备份当前版本 → 清理旧备份(保留 maxCount)
14. 上传压缩包 → 远程原子替换
15. 服务器部署目录保留 .quick-release/**
16. 执行 postCmd
17. 清理本地临时压缩包

注意:deploy 构建日志提交/推送发生在 envConfig.projectDir 对应的业务项目仓库中,不是 quick-fe-cli 工具仓库。

项目结构

quick-fe-cli/
├── src/
│   ├── index.ts                      # quick 主入口,注册 deploy / release / skill 命令组
│   ├── commands/
│   │   ├── deploy/                   # 部署命令组
│   │   │   ├── deploy.ts             # quick deploy <envs>
│   │   │   ├── rollback.ts           # quick deploy rollback <env>
│   │   │   ├── init.ts               # quick deploy init
│   │   │   ├── add.ts                # quick deploy add [envName]
│   │   │   ├── list.ts               # quick deploy list
│   │   │   └── backups.ts            # quick deploy backups <env>
│   │   ├── release/                  # 发布命令组
│   │   │   ├── release.ts            # quick release 命令组入口
│   │   │   ├── build.ts              # quick release build:构建、版本日志、版本号、commit/tag
│   │   │   └── npm.ts                # quick release npm:发布当前版本到 npm
│   │   └── skill/                    # Skill 命令组
│   │       ├── skill.ts              # skill 命令组入口
│   │       ├── list.ts               # quick skill list
│   │       ├── install.ts            # quick skill install [name]
│   │       └── registry.ts           # skill 注册表 + 平台配置
│   ├── core/                         # 核心模块(共享)
│   │   ├── deploy.ts                 # 部署流水线;构建后复制 .quick-release 到 dist 并打包上传
│   │   ├── release/                  # 发布与构建日志核心能力
│   │   │   ├── index.ts              # release build 编排
│   │   │   ├── build.ts              # 公共构建能力;生成/提交/推送 .quick-release 构建日志
│   │   │   ├── changelog.ts          # CHANGELOG 和构建 Markdown 日志生成
│   │   │   ├── git.ts                # Git commit / tag / push / 指定路径提交
│   │   │   ├── npm.ts                # npm publish 封装
│   │   │   └── version.ts            # 版本号、commit 分析、Git 日志读取
│   │   ├── ssh.ts                    # SSH 连接
│   │   ├── compress.ts               # 压缩
│   │   ├── backup.ts                 # 备份 + 回滚 + 清理
│   │   ├── hooks.ts                  # 钩子引擎
│   │   ├── config.ts                 # 配置加载
│   │   └── logger.ts                 # 日志(chalk)
│   ├── types.ts                      # 类型定义
│   └── utils/
│       ├── format.ts                 # 格式化
│       ├── validate.ts               # 校验
│       └── init-wizard.ts            # 交互引导模块(init / add 共享)
├── docs/
│   └── release-deploy-build-log-requirements.md # 发布/部署构建日志完整需求文档
├── skills/                           # 内置 Skill 定义
│   └── deploy/
│       └── SKILL.md                  # 前端部署 skill
├── scripts/                          # 历史脚本,保留兼容参考
│   ├── version.ts                    # 旧版版本管理 + 提交分析
│   ├── changelog.ts                  # 旧版 CHANGELOG 生成
│   ├── git.ts                        # 旧版 Git 操作
│   └── release.ts                    # 旧版交互式发布主流程
├── .quick-release/                   # 构建日志目录;release build 时在本仓库生成
│   ├── build-log.json                # 最近一次构建结构化日志
│   └── logs/
│       └── build-YYYYMMDD-HHmmss.md  # 每次构建对应的 Git 更新 Markdown 日志
├── .release-it.json                  # 历史 release-it 配置
├── .npmignore                        # npm 发布排除规则
├── package.json
├── tsconfig.json
├── CHANGELOG.md                      # release build 自动生成/更新
└── README.md

quick deploy env 打包的业务项目会生成并提交如下结构:

业务项目/
├── .quick-release/
│   ├── build-log.json
│   └── logs/
│       └── build-YYYYMMDD-HHmmss.md
└── dist/
    └── .quick-release/
        ├── build-log.json
        └── logs/
            └── build-YYYYMMDD-HHmmss.md

其中业务项目根目录下的 .quick-release/** 会提交并推送到远程仓库,dist/.quick-release/** 只随部署包上传,不提交到 Git。

扩展新命令组

src/commands/ 下新建目录:

// src/commands/analyze/analyze.ts
import { Command } from 'commander';
export function createBundleAnalyzeCommand(): Command {
  return new Command('bundle').description('分析打包体积').action(() => {
    console.log('分析中...');
  });
}

// src/index.ts
import { Command } from 'commander';
import { createBundleAnalyzeCommand } from './commands/analyze/analyze';

const analyzeGroup = new Command('analyze').description('代码分析');
analyzeGroup.addCommand(createBundleAnalyzeCommand());
program.addCommand(analyzeGroup);

使用:quick analyze bundle

Skill 系统

为 AI 编码助手(Trae、Claude Code、OpenAI Codex)提供标准化的项目使用指南。

quick skill list                        # 查看可用 Skill
quick skill install                     # 交互式安装(选 Skill → 选平台 → 确认)
quick skill install deploy              # 直接安装 deploy skill

目标平台

| 平台 | 安装路径 | |------|----------| | Trae | .trae/skills/deploy/SKILL.md | | Claude Code | .claude/skills/deploy/SKILL.md | | OpenAI Codex | .codex/skills/deploy/SKILL.md |

安装效果

安装后,AI 编码助手会自动读取对应目录下的 SKILL.md 文件,获取项目的部署流程、配置说明和使用指南,从而更好地辅助开发。

环境变量

# .env
DEV_HOST=192.168.1.100
DEV_USER=root
DEV_PASSWORD=your_password

License

MIT