关于前端:使用-Verdaccio-搭建一个企业级私有-npm-库

公有 npm 库，我想是每个团队都会实际和经验的一个阶段。实现公有 npm 的形式有很多种，例如基于公有 Git 仓库、基于 npm 官网提供的公有性能（付费）、Verdaccio 等等。然而，综合比拟各种因素下来（不要钱、还好用），Verdaccio 都略胜后面两者。

那么，明天本文也将带着大家一起应用 Verdaccio 来搭建一个企业级公有 npm 库！

Verdaccio 的装置启动过程较为简单。首先是全局装置 Verdaccio：

npm i -g verdaccio

而后，在终端中输出 verdaccio 命令启动 Verdaccio：

verdaccio

接着 Verdaccio 会在终端中输入提醒，输入它的配置文件地位、启动的服务地址等信息：

默认 Verdaccio 启动的服务都会在 4873 这个端口，在浏览器中关上这个地址咱们就会看到 Verdaccio 搭建的公有库 npm 的界面：

能够看到，默认的界面风格还是很简洁、好看的。并且，这里会提醒咱们要登陆、公布 npm 包须要执行的命令。

尽管，装置和启动好了 Verdaccio。然而，因为 Verdaccio 默认的配置和咱们生产的需要不统一，所以咱们须要批改一下 Verdaccio 的配置。

在生产环境下，公有 npm 库须要具备以下 3 个性能：

反对对 npm 包的搜寻
严格的权限把控，npm 包的拜访只能是已注册的用户。并且在一些场景下，须要删除用户
公布 npm 包后，推送到钉钉群，告知哪个 npm 包进行了公布

而 Verdaccio 的配置文件是在 ~/.config/Verdaccio 文件夹的 config.yaml 文件，默认的配置会是这样：

storage: ./storage
plugins: ./plugins
web:
  title: Verdaccio
auth:
  htpasswd:
    file: ./htpasswd
uplinks:
  npmjs:
    url: https://registry.npmjs.org/
packages:
  '@*/*':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs
  '**':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs
server:
  keepAliveTimeout: 60
middlewares:
  audit:
    enabled: true
logs:
  - {type: stdout, format: pretty, level: http}

这里咱们来一一认识一下默认配置中的几个值的含意：

storage 已公布的包的存储地位，默认存储在 ~/.config/Verdaccio/ 文件夹下
plugins 插件所在的目录
web 界面相干的配置
auth 用户相干，例如注册、鉴权插件（默认应用的是 htpasswd）
uplinks 用于提供对外部包的拜访，例如拜访 npm、cnpm 对应的源
packages 用于配置公布包、删除包、查看包的权限
server 公有库服务端相干的配置
middlewares 中间件相干配置，默认会引入 auit 中间件，来反对 npm audit 命令
logs 终端输入的信息的配置

接下来，咱们就来批改 Verdaccio 的配置文件中对应的值来一一反对上述性能。

当咱们公有 npm 库存在很多包的时候，咱们想要查找某个包就会有些麻烦。而 Verdaccio 是反对搜寻性能的，它是由 search 管制的，默认为 false，所以这里咱们须要开启它：

search: true

开启之后，咱们就能够在公有 npm 库的页面上的搜寻栏进行失常的搜寻操作。

权限把控指的是咱们须要公有 npm 库上公布的包 只能团队成员查看，除此之外人员不能看到所有信息。那么，回到 Verdaccio，咱们须要做这 2 件事：

限度 npm 包的查看，只能为已注册的用户
禁止用户注册（在团队成员已注册实现后）

相应地，这里咱们须要批改配置文件的 pacakges 和 auth。后面咱们也提及了 packages 是用于配置公布包、查看包、删除包相干的权限。咱们先再来看看默认的配置：

packages:
  '@*/*':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs
  '**':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs

这里的 key 代表对应权限须要匹配的包名，例如对于第一个，如果咱们公布的包名是这样的 @wjc/test 就会命中。每个规定中对应 4 个参数。其中 proxy 代表如果在公有 npm 库找不到，则会代理到 npmjs（对应 unlinks 中的 npmjs 的 https://registry.npmjs.org/）。而剩下的 3 个参数，都是用来设置包相干的权限，它有三个可选值 $all（所有人）、$anonymous（未注册用户）、$authenticated（注册用户）。那么，上面咱们别离看一下这 3 个参数的含意：

access 管制包的拜访权限
publish 管制包的公布权限
unpublish 管制包的删除权限

显然，这里咱们须要的是只有用户能力具备上述 3 个权限，即都设置为 $authenticated：

packages:
  '@*/*':
    access: $authenticated
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs
  '**':
    access: $authenticated
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs

设置好 packages 后，咱们还得更改 auth 的值，因为此时注册用户是没有限度的，也就是说如果你的公有 npm 库部署在外网环境的话，任何人都能够通过 npm adduser 命令注册用户。

显然，这是不容许呈现的状况，所以这里咱们须要设置 auth 的 max_users 为 -1，它代表的是禁用注册用户：

auth:
  max_users: -1

如果要开启用户注册，设置指定数字（大于 0）即可

公布包推送钉钉群，指的是咱们每次公布包能够通过钉钉群的机器人来告诉咱们公布的包的信息。

首先，这里咱们须要先有一个钉钉群的机器人对应的 Webhook（获取形式能够查看钉钉的文档）。而后，在 Verdaccio 的配置文件中增加 notify：

notify:
  'dingtalk':
    method: POST
    headers: [{'Content-Type': 'application/json;charset=utf-8'}]
    endpoint: https://oapi.dingtalk.com/robot/send?access_token=****, # 钉钉机器人的 webhook
    content: '{"color":"green","message":" 新的包公布了: * {{ name}}*","notify":true,"message_format":"text"}'

其中，method 和 headers 别离示意申请的办法和实体的类型。endpoint 示意申请的 Webhook 地址。content 则示意获取公布信息的根底模版，模版中 message 的值会是钉钉群的机器人发送的音讯内容（name 示意公布的包名）。

假如，此时咱们公布了一个包名为 verdaccio-npm-demo 的公有包，相应地咱们会在钉钉群里收到告诉：

既然配置好了 Verdaccio。那么，咱们就能够开始公布第一个公有包了 ????。

首先，咱们须要注册一个用户：

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

接着，它会要求你填写用户名、明码和邮箱，用于登陆公有 npm 库：

既然有注册用户，不可避免的需要是在一些场景下，咱们须要删除某个用户来禁止其登陆公有 npm 库。

后面也提及了 Verdaccio 默认应用的是 htpasswd 来实现鉴权。相应地，注册的用户信息会存储在 ~/.config/verdaccio/htpasswd 文件中：

wuliu:pWxgur/1w5v1I:autocreated 2021-02-18T07:58:57.827Z

这里一条记录对应一个用户，也就是如果这条记录被删除了，那么该用户就不能登陆了，即删除了该用户。

这里咱们为了操作方面，通过 nrm 来切换源。没有装置 nrm 的同学，能够先装置一下：

npm i -g nrm

而后，应用 nrm 增加一个源：

nrm add mynpm http://localhostm:4873/

这里的 mynpm 代表你这个源的简称，你能够因本人的爱好来命名。

接着，咱们能够运行 nrm ls 命令来查看目前存在的源：

能够看到默认状况下 npm 应用的源是 https://registry.npmjs.org/，那么这里咱们须要将它切换成公有 npm 库对应的源：

nrm use mynpm

切换好源后，咱们之后的 npm i 就会 先去公有库查找包，如果不存在则会去 https://registry.npmjs.org/（因为下面配置了 proxy）查找包。

公布的话就间接在某个须要公布包的我的项目（假如这里咱们的包叫 verdaccio-npm-demo2）的根目录下运行：

npm publish

而后，在公有 npm 库的界面上就能够看到咱们公布的包：

当然，Verdaccio 能做的还有很多，例如集成 Git Action 主动发包、自定义鉴权插件等。然而，通过咱们下面的一番折腾，公有 npm 库曾经初具规模能够投入生产应用了哈 ????。最初，文章中如果存在表白不当或谬误的中央，欢送各位同学提 Issue。

通过浏览本篇文章，如果有播种的话，能够 点个赞，这将会成为我继续分享的能源，感激～

我是五柳，喜爱翻新、捣鼓源码，专一于源码（Vue 3、Vite）、前端工程化、跨端等技术学习和分享，欢送关注我的 微信公众号：Code center。

关于前端:使用-Verdaccio-搭建一个企业级私有-npm-库

前言

一、装置、启动

二、配置批改

2.1 开启搜寻

2.2 权限把控

2.3 公布包推送钉钉群

三、根本应用

3.1 注册用户

3.2 删除用户

3.3 增加、切换源

3.4 公布

结语

点赞 ????