npm 与 nrm

157 阅读3分钟

前言

佛祖保佑, 永无bug。Hello 大家好!我是海的对岸!

本文的写作背景是,在使用 npm发包中,碰到的问题,进而引出 nrm 这个东西

背景

各位前端coder 在工作中,往往都或多或少会有自己封装过组件。

初级玩法:coder自己把组件封装好了,然后下个项目要用了,就找到之前项目中的这个自己封装好的组件,然后 ctrl + c, ctrl + v, 拷贝过来接着用。

中级玩法:有时候随着工作年限的增加,经手的项目越来越多,不知道自己这个项目用到的组件,到底放哪了,找起来,比较费劲,就自己找个地方,暂存一下,下次要用,就去暂存那里去拿下(我目前是把工作中用到的组件,放在了笔记,博客中)

高级玩法:把组件做成包,自己发布到 npm中,如果是公司内部的项目,那就发布到公司自己搭的私有npm服务器中(私有 npm服务器 不在本文讨论范围内,暂不展开)

npm 发包简单快速介

本人在使用npm发布的时候,前前后后折腾了好久,在此过程中发现了nrm这个好东西

发包的命令其实很简单就2步两条指令

你把你要发布的包准备好之后

  1. 在cmd终端输入 npm login, 进行登录
  2. 登录成功之后,然后进入你要发布的包的路径中,输入 npm publish

嗯,就这么简单,其实在 npm login 这里也有坑,但本文的重点是nrm, npm login 这里后续再写一篇文章

正文

因为最后要发包到 npm官网上,npm的官网是

https://registry.npmjs.org/

但是我们平时开发的时候,使用的是npm的镜像网站,因为npm官网在国外,下载很慢

所以如果自己要发包的话,需要再次把我们之前的镜像网站,再设置成 npm的官方网站

查看npm的配置
npm config list

设置官方源
npm config set registry https://registry.npmjs.org/

设置国内镜像源
npm config set registry http://registry.npmmirror.com/

我们如果手动操作的话,那就要在平常开发的时候,手动执行下 npm config set registry http://registry.npmmirror.com/ 命令,在要发包的时候,再手动执行下 npm config set registry https://registry.npmjs.org/, 是不是很繁琐。

那么 nrm是干嘛的,nrm 全名是npm registry manager, 即npm的镜像源管理工具。我们大多数人应该在使用npm时,使用过淘宝镜像来进行npm包的安装,但当有多个源时,切换并不方便,这时就可以使用nrm来管理镜像源。

  • 安装 nrm
npm install nrm -g

image.png

  • 查看可选的源
nrm ls

由下图可知,nrm内置了6个源,带*的表示当前使用的源

image.png

嗯,在图上没看到带有 * 号的,是因为我们刚刚才装上 nrm, 我们之前使用的npm镜像源,是我们手动 配置的

  • 使用current命令,可以查看当前使用的源
nrm current

image.png

这个就是我们之前,在没使用 nrm的时候,自己通过 npm config set registry http://registry.npmmirror.com/ 命令自己手动设置的

  • 切换源 use 命令,在nrm ls中,我们发现 淘宝的镜像源已经在nrm内置中了,我们就直接使用 nrm里面的淘宝镜像源
切换到淘宝镜像源
nrm use taobao

image.png

嗯嗯,这下 * 号出来了

nrm 还可以添加自己定义镜像源,比如公司内部的镜像源,也可以添加到 nrm中 进行管理,讲 nrm的 添加自定义镜像源的时候,可以顺带 讲 nrm的 测试镜像源的响应时间nrm删除自定义镜像源

添加自定义的源
nrm add registry_name http://url...
举个栗子,比如 
nrm add taobao222  http://registry.npmmirror.com/

测试源
nrm test registry_name
举个栗子,比如
nrm test taobao222

删除源
nrm del registry_name
举个栗子,比如
nrm del taobao222

image.png

image.png