npm源码分析之npm docs

前言

之前提到了npm repo,可以快速打开每一个npm包的github源码页面。

这里有一个传送门,可以自行前往查看它的源码分析部分。

今天同样要讲一个能帮我们快速了解每一个npm包的npm命令,npm docs,它还有一个别名npm home。顾名思义,这个命令就是查看每一个npm包的文档。

具体实现

下面以查看react的文档为例,我们可以直接在终端输入npm home react,它能快速帮我们打开react的官方文档,我们会发现打开的是reactjs.org/这个官网链接。

我们先看一下npm docs的代码逻辑,这里还是要提一下,如果还不了解npm是如何启动及注册命令,可以打开这个传送门去了解一下,再看npm docs的实现逻辑就会非常清晰了。

function docs (args, cb) {  if (!args || !args.length) args = ['.']  var pending = args.length  log.silly('docs', args)  args.forEach(function (proj) {    getDoc(proj, function (err) {      if (err) {        return cb(err)      }      --pending || cb()    })  })}
复制代码

从源码里可以看到npm docs命令是可以同时打开多个npm包的文档页面的。

核心逻辑都在getDoc这个方法里

function getDoc (project, cb) {  log.silly('getDoc', project)  fetchPackageMetadata(project, '.', {fullMetadata: true}, function (er, d) {    if (er) return cb(er)    var url = d.homepage    if (!url) url = 'https://www.npmjs.org/package/' + d.name    return openUrl(url, 'docs available at the following URL', cb)  })}
复制代码

在这里我们又一次看到了fetchPackageMetadata

在npm repo的实现分析里我们也看到了这个方法,这里我就不赘述了,大家可以通过传送门去看一下。

通过fetchPackageMetadata,我们拿到了对应npm包的源信息,我们发现首先判断homepage字段是否存在,

如果存在homepage,则直接打开对应链接所在页面,我们首先看一下react包的源信息,通过pacote manifest react --fullMetadata=true

我们发现react包的源信息里的homepage正好就是我们前面提到的reactjs.org/这个官网链接,所以通过… docs react这个命令打开的就是react的官网。

这里顺便提一下,大家以后自己开发npm包的时候,可以把自己的homepage配置上,如果没有个性的官方文档,也可以直接配置github页面。

当然也有可能npm包没有配置homepage字段

url = 'https://www.npmjs.org/package/' + d.name
复制代码

则打开npmjs官网上对应包的信息页面,比如www.npmjs.com/package/rea…

总结

npm这个包管理工具,我们必须要好好利用它,因为在我们每天的前端开发过程中,都在和众多的npm包依赖打交道,通过npm docs命令我们可以快速查看对应npm包的文档信息,提高开发效率,同时又能更进一步了解我们在使用的工具。

同时,别忘记npm docs还有一个别名npm home。

哈哈,眼尖的同学会发现还有一个小技巧就是直接www.npmjs.com/package/xxx…

作为程序员,能使用终端命令就就可能用cli来解决。

猜你喜欢

转载自juejin.im/post/7035178502773030949