前言
之前提到了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来解决。