NPM Browser: 在线浏览 NPM 包内容

最后更新于

更新

最近 npm 官网上线了一个查看包内容的 tab https://www.npmjs.com/package/npm?activeTab=explore, https://github.blog/changelog/2022-12-06-explore-the-content-of-your-npm-packages-with-the-new-code-explorer/

更新

我以前经常使用 jsdelivr 和 unpkg 来查看一些 NPM 包的源码，这么做有几个好处：

  1. 假如这个包没有开源1，我们仍然可以读到一些有用的内容；
  2. 虽然开源了，但是有可能打包工具配置有问题，可以借助这些网站快速查看包结构；
  3. 是在线的，不用污染本地环境。

虽然这两个 CDN 都很快，但是想要切换文件还是比较慢。因此我写了个 NPM Browser 来满足我的需求，它的前身是 tool/npm。

用法

直接打开输入包名即可从 npm registry 上下载 tgz 并解压出来查看。目前我还没有发现第二个 npm registry 镜像能够给前端开 CORS 的。并且我还用了 indexeddb 缓存每个包的内容，浏览看过的包会很快。

搜索包也是用的 npm registry 的 API，有时可能会超出 rate limit 导致无法响应。

地址栏会实时显示整个应用的状态，可以简单地分享给别人对线，格式为:

网址?q=包名@版本/package/路径:行数

下面演示几个用法：

另一个我觉得很有用的功能是文件 diff，在标题栏包名右边第二个按钮就是。有的时候一些第三方包升级，但是 changelog 不会事无巨细地列出所有代码的修改，此时可以利用这个功能查看到底改了啥，例如前几天 markedjs 更新了一个小版本：

以上。

  1. 例如 motion ↩