npm-package-comparator

npm 包比较工具

使用 npm、GitHub、Bundlephobia 和 Snyk 的实时数据并排比较任意一组 npm 包，然后根据你的实际需求给出明确建议。

预检（必需）

进行任何 TinyFish 调用之前，务必运行以下两项检查：

1. 是否已安装 CLI？

which tinyfish && tinyfish --version || echo "TINYFISH_CLI_NOT_INSTALLED"

如果尚未安装，请停止并告知用户：

安装 TinyFish CLI：npm install -g @tiny-fish/cli

2. 是否已完成身份验证？

tinyfish auth status

如果尚未完成身份验证，请停止并告知用户：

你需要 TinyFish API 密钥。请前往此处获取：https://agent.tinyfish.ai/api-keys

然后进行身份验证：

tinyfish auth login

在两项检查都通过之前，不要继续。

---

步骤 1 — 收集输入

你需要：

• 包名 — 2 到 4 个要比较的包（例如 zustand、jotai、redux）
• 使用场景（可选，但有助于改进建议）— 例如“小型 React 应用”“大型企业代码库”“需要 SSR 支持”

如果用户没有指定使用场景，请询问：

“你打算用它构建什么？（例如：小型个人项目、大型团队代码库、对性能要求很高的应用）”

如果他们不清楚，可以在不提供使用场景的情况下继续，并给出一般性建议。

---

步骤 2 — 并行获取数据

针对每个包，同时从 npm、GitHub、Bundlephobia 和 Snyk 启动 Agent。所有包的所有 Agent 都要并行运行——每个数据源对应每个包启动一个 Agent。

# ── For each PACKAGE, run all 4 agents in parallel ───────────

# npm stats
tinyfish agent run \
  --url "https://www.npmjs.com/package/{PACKAGE}" \
  "You are on the npm page for the package {PACKAGE}.
   Extract:
   - current version
   - weekly downloads (exact number shown)
   - total downloads if shown
   - last publish date
   - license
   - number of dependencies
   - TypeScript support (yes/no — check if types are listed)
   - maintainers count
   - repository URL
   STRICT RULES:
   - Do NOT click any links
   - Read only what is visible on this page
   - If a field is not shown, return null
   Return JSON: {package, version, weekly_downloads, last_published, license, dependency_count, typescript_support, maintainer_count, repo_url}" \
  --sync > /tmp/npm_{PACKAGE_SAFE}.json &

# GitHub stats
tinyfish agent run \
  --url "https://github.com/{OWNER}/{REPO}" \
  "You are on the GitHub repository page for {PACKAGE}.
   Extract:
   - star count
   - fork count
   - open issues count
   - last commit date
   - number of contributors (from sidebar or Insights)
   - latest release tag and date
   - whether the repo is actively maintained (check: last commit within 6 months)
   STRICT RULES:
   - Do NOT click any tabs or links
   - Read only what is visible on the main repo page
   Return JSON: {package, stars, forks, open_issues, last_commit, contributors, latest_release, latest_release_date, is_active}" \
  --sync > /tmp/gh_{PACKAGE_SAFE}.json &

# Bundle size
tinyfish agent run \
  --url "https://bundlephobia.com/package/{PACKAGE}" \
  "You are on the Bundlephobia page for {PACKAGE}.
   Extract:
   - minified size (in KB)
   - minified + gzipped size (in KB)
   - download time on slow 3G (if shown)
   - tree-shakeable (yes/no)
   - side-effect free (yes/no)
   STRICT RULES:
   - Do NOT click any links
   - Read only what is visible on this page
   - If the page hasn't loaded sizes yet, note it
   Return JSON: {package, minified_kb, gzipped_kb, tree_shakeable, side_effect_free}" \
  --sync > /tmp/bp_{PACKAGE_SAFE}.json &

# Known vulnerabilities
tinyfish agent run \
  --url "https://security.snyk.io/package/npm/{PACKAGE}" \
  "You are on the Snyk security page for the npm package {PACKAGE}.
   Extract:
   - total number of known vulnerabilities
   - number by severity: critical, high, medium, low
   - most recent vulnerability title and date (if shown)
   STRICT RULES:
   - Do NOT click any vulnerability links
   - Read only the summary visible on this page
   - If the page shows 'no vulnerabilities', return {total: 0}
   Return JSON: {package, total_vulns, critical, high, medium, low, latest_vuln_title, latest_vuln_date}" \
  --sync > /tmp/snyk_{PACKAGE_SAFE}.json &

# Repeat the above 4 agents for each additional package
# All backgrounded with & — fire everything at once then:
wait

# Collect all results
for p in {PACKAGE_LIST}; do
  echo "=== $p ===" 
  cat /tmp/npm_${p}.json
  cat /tmp/gh_${p}.json
  cat /tmp/bp_${p}.json
  cat /tmp/snyk_${p}.json
done

运行之前，替换：

• {PACKAGE} — 确切的 npm 包名，例如 zustand
• {PACKAGE_SAFE} — 安全的文件名版本，例如 zustand
• {OWNER}/{REPO} — GitHub 仓库，例如 pmndrs/zustand
• {PACKAGE_LIST} — 所有包名组成的空格分隔列表

利用你掌握的信息查找知名包对应的 GitHub 仓库。对于不熟悉的包，先查看其 npm 页面上的 repository 字段。

---

步骤 3 — 综合比较

整合所有数据，制作并排比较。

## Package Comparison: {PACKAGE_1} vs {PACKAGE_2} vs ...

*Data fetched live — {date}*

---

### 📊 At a Glance

| | {pkg1} | {pkg2} | {pkg3} |
|---|---|---|---|
| **Version** | {v} | {v} | {v} |
| **Weekly Downloads** | {n} | {n} | {n} |
| **GitHub Stars** | {n} | {n} | {n} |
| **Bundle (gzipped)** | {n}kb | {n}kb | {n}kb |
| **Tree-shakeable** | ✅/❌ | ✅/❌ | ✅/❌ |
| **TypeScript** | ✅/❌ | ✅/❌ | ✅/❌ |
| **Last Published** | {date} | {date} | {date} |
| **Known Vulns** | {n} | {n} | {n} |
| **License** | {l} | {l} | {l} |

---

### 📈 Popularity & Health

{2-3 sentences comparing download trends, GitHub activity, and community size}

---

### 📦 Bundle Size

{Comparison of bundle impact — important for frontend packages}
{Flag if any package is significantly larger than alternatives}

---

### 🔒 Security

{Note any packages with known vulnerabilities}
{If all clean: "No known vulnerabilities found for any of these packages."}

---

### ⚙️ Maintenance

{Compare last commit dates, contributor counts, release cadence}
{Flag any package that looks abandoned (no commits in 12+ months)}

---

### 🎯 Recommendation

{Use case}: {user's stated use case or "general use"}

**Best pick: {PACKAGE}**

{2-3 sentences explaining why this package wins for this use case, and what trade-offs you're making}

**When to pick {PACKAGE_2} instead:**
{1-2 sentences on when the runner-up is the better choice}

**Avoid {PACKAGE_3} if:**
{Any specific reasons to avoid a package in certain contexts}

---

边缘情况

• 包未发布到 npm — 检查它是否仅在 GitHub 上发布，并直接抓取仓库信息
• Bundlephobia 中没有该包 — 标注“包体积数据不可用”，并跳过该行
• 无法从 npm 页面找到 GitHub 仓库 — 搜索 https://github.com/search?q={PACKAGE}&type=repositories，查找官方仓库
• 其中一个包已弃用 — 在比较结果顶部醒目标注：“⚠️ {package} 已弃用——维护者建议改用 {replacement}”
• 比较超过 4 个包 — 请用户将范围缩小到最想比较的 3 个，因为包太多会难以进行有效比较
• 包的用途略有不同 — 在比较之前先说明区别（例如：“react-query 处理服务端状态，zustand 处理客户端状态——你可能实际上两者都需要”）