如何获取一个 npm 包的信息

English Version

我们当然可以通过访问npm 官网 (opens in a new tab)来查询一个包的信息，但是这种方式有一些缺陷：

• 需要在浏览器中打开一个 tab 再进行查询
• 查看 Dependency 需要再点击一下“Dependency”导航栏
• Dependency 只显示包名，没有其他信息
• 没有 Github 的 star 数
• …

通过类似 API 的方式聚合 Dependency、github 信息，可以更加方便地查阅一个包的信息。

Npm registry api

npm official api (opens in a new tab) 支持跨域 (opens in a new tab)。

举个例子，查询next最新版本的信息，请求的 URL 是https://registry.npmjs.org/next/latest (opens in a new tab) 返回的结果（精简版）：

{
  "name": "next",
  "version": "12.2.5",
  "description": "The React Framework",
  "repository": { "type": "git", "url": "git+https://github.com/vercel/next.js.git" },
  "homepage": "https://nextjs.org",
  "dependencies": { "@next/env": "12.2.5", "@swc/helpers": "0.4.3" }
}

可以从中获取版本、仓库地址、依赖、维护者等信息。

Github api

查询 github 相关信息可以通过其官方 api

• restful (opens in a new tab)
• graphql (opens in a new tab)

Github api 都不支持跨域 (opens in a new tab)，并且有请求次数限制，未授权 github 账号的情况下，restful每小时只有 60 次请求，而graphql则必须登录使用。

抓取 Github 页面

通过像网络爬虫一样直接获取 Github 页面，从页面文本中获取数据，此种方法不支持跨域 (opens in a new tab)。

举个例子，获取next的 git 仓库页面https://github.com/vercel/next.js，通过DOMParser (opens in a new tab)(in browse)或者jsdom (opens in a new tab)(in nodejs)来解析出想要的信息。 比如#repo-stars-counter-star元素的文本内容就是该仓库的 star 数。

PDJ

PDJ 是一个聚合了一个 npm 包信息的工具，它对信息做了提取，只显示一个包的基本信息：

• 介绍
• npm 周下载量
• github star 数
• Denpendency 列表，包含每个依赖包的介绍

PDJ 有一个网页 App (opens in a new tab)，也有一个 Chrome 扩展 (opens in a new tab)，Chrome 扩展支持在 github 页面上查阅 package.json 屏显示以上提到的信息。