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/


更新

我以前经常使用 jsdelivrunpkg 来查看一些 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