人人都该从 npmx 偷学的功能

# 每个包仓库网站都该抄的 npmx 功能 来源：https://nesbitt.io/2026/04/16/features-everyone-should-steal-from-npmx.html GitHub 接管 npm 后的这些年，npmjs\.com 几乎处于“冰封”状态，issue 区里堆满了多年无人理会的需求。今年一月，Daniel Roe（https://roe.dev/）上线了 npmx\.dev（https://npmx.dev/），用同一套 registry 数据做了全新前端，并在 Bluesky 上发了个帖子。两周内，积压多年的需求瞬间变成一千多个 issue 和 PR，贡献者数量几天就破百。关键 trick 是：任何 npmjs\.com 的网址，把域名换成 npmx\.dev 或 xnpmjs\.com 就能直接打开——跟 Invidious、Nitter 一样，浏览器插件和肌肉记忆完全无缝。竞争压力似乎奏效：npmjs\.com 上个月终于上线暗色模式——这个 issue 高票五年没人动；其它陈年工单也开始被捡起来。 不管 npm 官方后续如何，npmx 已经成了一份“包仓库前端灵感大全”。整个项目 MIT 开源（https://github.com/npmx-dev/npmx.dev），而 npm 官网和 registry 仍是闭源，所以下面每项功能都有可直接抄的参考实现，而非仅截图。其它生态如有先例，也一并注明。 - **传递式安装体积** 显示的是“包自身 + 所有依赖”解压后的总大小，而非 crates\.io、PyPI 那种仅 tarball 体积。JS 圈以前得靠 bundlephobia（https://bundlephobia.com/）和 packagephobia（https://packagephobia.com/）才能看到。 - **安装脚本明示** 只要 manifest 里出现 `preinstall`/`install`/`postinstall`，页面就直接渲染出来，并列出这些脚本会 `npx` 拉取的包，再链到代码浏览器，方便你审阅——供应链攻击很多就是从 postinstall 钩子开始的。 - **过期与漏洞依赖树** 不是扁平地列“声明依赖”，而是可展开的树，每个节点标注距离最新版差多少、是否出现在 OSV（https://osv.dev/），递归到传递依赖。Google 的 deps\.dev（https://deps.dev/）跨生态也做了类似功能。 - **版本范围解析** 任何 `^1.0.0` 这类 semver 区间旁，都会显示它当前实际解析到的精确版本，省得你再跑一趟 CLI。 - **模块替换建议** 只要包出现在 e18e module-replacements 数据集（https://github.com/es-tooling/module-replacements），页面就 banner 提示“原生 API 或更轻替代”，原生场景附带 MDN 链接。 - **模块格式与类型徽章** 包名旁直接标 ESM / CJS / dual，是否自带 TS 类型，还是要装 `@types/*`，以及声明的 Node 引擎范围。JS 特有，但“能否跑在我的工具链”这种徽章思路通用：crates\.io 的 MSRV 和 edition 徽章就是同类。 - **多 forge 仓库统计** 根据 `repository` 字段，一次性拉取 GitHub、GitLab、Bitbucket、Codeberg、Gitee、Sourcehut、Forgejo、Gitea、Radicle、Tangled（https://docs.npmx.dev/guide/features#supported-git-providers）的 star/fork，不再只特事特办 GitHub。 - **跨 registry 存在提示** 带 scope 的包如果 JSR（https://jsr.io/）也有，会被标记。npm/JSR 是 JS 圈特有，但“本包在 X 仓库也有”任何重叠生态都用得上，比如 Maven/Clojars，或各 Linux 发行版仓库；顺带还能做依赖混淆检查：同名但发布者不同就报警。 - **并排包对比** 最多十包一起扔进 compare 视图（https://npmx.dev/compare），上面所有指标列成表格，再加散点图：横轴“流行度”、纵轴“体验分”，胖而流行和轻但小众一眼分开。 - **版本 diff** 任意两版可在浏览器内逐文件 diff。Hex 通过 diff\.hex\.pm（https://diff.hex.pm/）早就有了，Rust 圈也有 `cargo-vet` 工具链。 - **带体积标注的发布 timeline** 每版按时间轴排列，体积跳变点直接标出来，一眼看出哪次 release 把测试固件打进去。 - **按版本线的下载分布** 周下载量图可按 major/minor 拆开，看生态里多少人在 v2、多少人在 v5。类似 RubyGems 的逐版下载表（https://rubygems.org/gems/rails/versions），但用面积图更直观。 - **命令面板** `⌘K` 呼出面板，当前页面所有操作 + 全局导航都能搜；在包页面直接输 semver 区间，版本列表实时过滤。灵感来自编辑器和 GitHub，而非任何 registry。 - **国际化** 界面自带 30+ 语言（https://github.com/npmx-dev/npmx.dev/tree/main/i18n/locales），含 RTL；PyPI 的 Warehouse（https://hosted.weblate.org/projects/pypa/warehouse/）是另一家投重金做 i18n 的 registry。 - **默认无障碍** 图表和演示视频带长文本 `aria-label`/`figcaption`，命令面板可读屏，另有独立无障碍声明（https://npmx.dev/accessibility）。 - **操场链接提取** README 里找到的 StackBlitz、CodeSandbox、CodePen、JSFiddle、Replit 链接会被单独拎出来成面板，一键试玩，无需克隆。 - **Agent Skill 探测** 包含 Anthropic Agent Skills（https://www.anthropic.com/news/skills）manifest 的包会列出声明的工具兼容性——2026 年新热点，但“探测包里非代码载荷”这思路通用。 - **AT Protocol 社交功能** 包“点赞”是 atproto（https://atproto.com/）记录而非私有表；博客评论即 Bluesky 线程；自定义 record 类型以公共 lexicon 放在仓库（https://github.com/npmx-dev/npmx.dev/tree/main/lexicons），第三方工具无需访问 npmx 就能读写。若想给 registry 加评论/评分却怕审核负担，直接借用现有网络的身份与内容层算条出路。我个人对长期依赖 Bluesky 基础设施持疑，但 npmx 自己跑了个 PDS（https://npmx.dev/pds），记录始终握在自己手里。 - **本地 CLI 管理通道** 抢注包、改权限等管理操作走你本地 `npm` CLI，而非强迫登录网站，npmx 无需托管一份自己拿不到的 registry 凭据。 - **暗色模式 + 自定义主题** 放最后，因为 npm 官方已抄完；pkg\.go\.dev、crates\.io、PyPI 早就有了。 --- \.NET 圈已经有人对标：nugx\.org（https://nugx.org/），自我介绍就一句“inspired by npmx”，正给 NuGet 做同样的事。