NPM私库搭建-verdaccio

  • Post author:
  • Post category:其他




背景

沿用微前端的思想,需要把公共组件部分抽成包,提供给各子服务导入使用。

于是需要一个管理包的仓库,也就是要搭建属于项目组的npm仓库。

网上随手一搜都是sinopia,而且上手还挺快的分分钟就启动好了,但是!!后续的上传下载包各种问题,搞了好久,发现这玩意这么多年没更新了,再一查现在都用verdaccio了。

血泪教训啊!!!


技术选型一定要注意文章的时间!然后注意npm上的下载量和修改时间!!


官方文档:https://www.npmjs.com/package/verdaccio

参考官方文档,我先在本地window电脑上进行了私库搭建,并能提供同组小伙伴使用,后续将仓库在linux服务器上部署,再说。



搭建npm私库步骤



一、下载verdaccio

任意路径下运行命令:


npm install --global verdaccio



二、启动本地仓库

任意路径下运行命令:


verdaccio



三、修改npm下载仓库地址

首先可以查询当前电脑的npm配置,任意路径下运行命令:


npm config ls


可以看到自己原来的默认下载仓库:registry = https://registry.npmjs.org/

修改地址为本地的仓库,任意路径下运行命令:


npm set registry http://localhost:4873/



四、确保在npm官网注册过账号密码

请在npm官网注册一个账号,记住用户、密码和邮箱,后续上传包需要用到。



五、将用户名密码添加到verdaccio

首先可以查询用户是否注册登录,任意路径下运行命令:


npm who am i


如果出现如下截图,提示你需要npm adduser:

在这里插入图片描述

运行命令:


npm adduser --registry http://localhost:4873


依次输入官网注册的用户、密码和邮箱即可。

在这里插入图片描述

注册登录成功后,可以看到verdaccio的配置文件夹(启动verdaccio后的控制台可以看到配置文件位置和访问的IP:PORT)下C:\Users\xxx\AppData\Roaming\verdaccio多了一个文件:htpasswd。



六、上传下载你的包

大佬可以直接上传你的包了,像我这种啥也不会的先创建一个测试包试试:



6.1 初始化包

新建文件夹demo,进到文件夹下执行命令:


npm init -y


该命令能够初始化本地仓库,会生成package.json文件,里面包含一些基本的信息,比如文件中写明入口main是index.js。



6.2 创建包入口文件index.js

package.json创建一个index.js文件,内容如下:


console.log('测试测试测试!!!')



6.3 发布demo包

在demo文件夹下执行命令:


npm publish --registry http://localhost:4873


在这里插入图片描述

刷新verdaccio页面:看到了demo包!!!终于成功了!!!



6.4 下载demo包

新建一个文件夹,进去执行命令:


npm install demo


在这里插入图片描述

下载成功了!!!



6.5 再次发布测试

若不是初次publish包,会出现版本报错:

在这里插入图片描述

首先确保在demo文件夹下,先执行版本号+1命令:


npm version patch -m "Version %s - v0.0.1"


该命令是版本号最后一位加1。

然后再次执行发布命令:


npm publish --registry http://localhost:4873


成功了,不会出现上图的错误,而是如下图所示:

在这里插入图片描述

另外:有时候出现上图的版本错误,可能是因为包的文件名被占用了,是公有库的文件名比如vue啊这些自己的包都不能叫这个名字。



七、给项目组小伙伴用



7.1 修改服务以IP启动

默认启动verdaccio后访问地址是localhost,即便输入本地IP也无法访问,需要找到配置文件修改。

配置文件路径在启动verdaccio的控制台可以看到:

C:\Users\xxx\AppData\Roaming\verdaccio\config.yaml

打开文件,末尾追加:


listen: 0.0.0.0:4873


然后重启verdaccio服务即可。



7.2 重新上传包

重启后发现控制台的访问地址由localhost:4873变成了0.0.0.0:4873。

浏览器输入本地IP:4873即可访问,访问发现刚刚上传的包没了,莫慌因为IP不同了所以重新上传吧。



7.3 修改npm下载仓库地址

输入命令:


npm set registry http://IP:4873


此时直接上传会报错E401,提示没有登录。



7.4 登录verdaccio搭建的私库

输入命令:


npm login


在这里插入图片描述

如果不成功试试如下命令:


npm adduser --registry http://IP:4873


此时直接上传会报错版本号冲突。



7.5 修改版本号

在需要上传的包路径下,先执行版本号+1命令:


npm version patch -m "Version %s - v0.0.1"


然后执行上传包命令:


npm publish --registry http://IP:4873



7.6 提供私库地址给小伙伴下载

小伙伴需要先设置npm下载仓库地址,任意路径下运行命令:


npm set registry http://IP:4873/


然后执行安装demo包命令:


npm install demo






其他说明

1、文中很多命令后面跟了–registry 仓库地址,其实只要npm set registry 仓库地址没有问题,是不用在命令后追加–registry的,但是为了保证仓库没搞错,多此一举也行,后续操作熟练以后就可以去掉。

2、上传搞错了,又不想追加版本,可以删除上一个版本的包,命令如下:


npm unpublish demo@0.0.1


3、一开始我以为把npm仓库设到了本地verdaccio,那如果是本地仓库里没有的包呢?难道要不停的来回切换npm库的地址嘛?

当然不是,本地仓库里没有的包,verdaccio会去它配置的仓库地址里拉去。也就是说,如果要下载vue的官方包,npm问verdaccio要,verdaccio没有,它会去它配置的仓库里面获取,转发了一层而已。

那么这个verdaccio的仓库配置仍然是前面提到的config.yaml文件,修改如下url即可:

uplinks:
  npmjs:
    url: https://registry.npmjs.org/

很多人推荐为了下包的速度快,将改地址修改为taobao镜像http://registry.npm.taobao.org/。

我觉得速度还行,反而之前用cnpm下载某些包有问题,还是npm靠谱。



尚未提及

若需要在linux安装,可利用pm2一直守护verdaccio进程,尚未尝试。

本项目组在window服务器上装了一个,至于守护该服务开机自启等就交给运维吧。



版权声明:本文为Beam007原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。