前言
最近开会的时候讨论到前端组件库搭建，因为需要多人协作，使用npm link等都比较麻烦，且当业务规模较大了之后，我们一般会有自己的脚手架，自己的全局工具包等等。其中可能包含了自身的业务代码不能公开，因此我们都需要一个私有化的npm仓库。
一般私有化的npm仓库有以下几种方法实现：
通过npm购买私有服务 通过git直接引用 通过开源项目直接搭建，例如cnpm、verdaccio、sinopia等
下面对各个方案进行一个粗浅的对比：
官方私有npm服务 ：团队版$7/人/月这个价格就已经直接劝退，且不说npm在国内的网络情况不容乐观。 直接安装git代码 ：直接通过npm install 引入对应git代码确实有一定的便利性，但是当全局包多了之后不便于维护且权限难以管理 sinopia ：基于Node.js实现的一个开源npm库，年久失修。最近一次提交是6年前，直接放弃。 cnpm ：阿里出的npm私有方案，权限控制较为全面但是配置复杂，需要自己搭建mysql之类的数据库存储。 verdaccio ：基于sinopia继续开发，目前维护很频繁而且配置简单，可以快速搭建。
为什么选用Verdaccio？
https://verdaccio.org/
先跟大家吐个槽，其实我本来是想用sinopia搭建的私服，也知道大家也都倾向于 sinopia 来搭，毕竟它出道比较早，知名度比较高，但是sinopia的作者几年前就已经停止了对sinopia的维护和升级，不信大家可以自己去GitHub上看，上次更新真的停留在了几年前，唉，然后真是留了一堆坑，所幸不是没人管，只是有一群人又出了一个sinopia的fork,也就是sinopia的分支，而且还起了个洋气的意大利名verdaccio ，但是verdaccio 确实是正在维护的，我查了最近一次更新还是在2天前，这帮人还是挺勤快的，造福了大家啊~ 而且也比较好用，我用sinopia搭的时候填的一堆坑在verdaccio 这压！根！不！存！在！真是绝望啊，为啥我没有早点发现它。这里是 verdaccio 在github的源码地址 ，大家想深入了解最好还是去看看源码和详细介绍。话不多说下面正式开始verdaccio的搭建。
安装
Verdaccio 的安装启动过程较为简单。首先是全局安装 Verdaccio：
npm i -g verdaccio
然后，在终端中输入 verdaccio 命令启动 Verdaccio：
接着 Verdaccio 会在终端中输出提示，输出它的配置文件位置、启动的服务地址等信息：
默认 Verdaccio 启动的服务都会在 4873 这个端口，在浏览器中打开这个地址我们就会看到 Verdaccio 搭建的私有库 npm 的界面：
修改配置
虽然，安装和启动好了 Verdaccio。但是，由于 Verdaccio 默认的配置和我们生产的需求不一致，所以我们需要修改一下 Verdaccio 的配置。
在生产环境下，私有 npm 库需要具备以下 3 个功能：
支持对 npm 包的搜索 严格的权限把控，npm 包的访问只能是已注册的用户。并且在一些场景下，需要删除用户
配置文件
npm i -g verdaccio
# 存放软件所有软件包的目录
storage: storage
# 存放所有插件的目录
plugins: plugins
web:
# 网站Title
title: Verdaccio
# 禁用Gravatar头像
# gravatar: false
# 排序方式 asc|desc
# sort_packages: asc
# 是否启用暗黑模式
# darkMode: true
# logo地址
# logo: http://somedomain/somelogo.png
# favicon地址
# favicon: http://somedomain/favicon.ico | /path/favicon.ico
# i18n翻译配置
# i18n:
# 可用列表见：https://github测试数据/verdaccio/ui/tree/master/i18n/translations
# web: en-US
auth:
htpasswd:
file: ./htpasswd
# 最大注册用户数，默认为 "+inf".
# 可用通过设置为-1禁止注册
# max_users: 1000
# 上游npm库，这里可用设置为淘宝
uplinks:
npmjs:
url: https://registry.npmjs.org/
packages:
# 作用域包
'@*/*':
# 允许所有人访问
access: $all
# 注册用户可访问
publish: $authenticated
# 注册用户可访问
unpublish: $authenticated
proxy: npmjs
'**':
# 默认情况下所有用户 (包括未授权用户) 都可以查看和发布任意包
# 你可以指定 用户名/分组名 (取决于你使用什么授权插件，默认的授权插件是内置的 htpasswd)
# 访问权限有三个关键词: "$all", "$anonymous", "$authenticated"
# $all 表示不限制，任何人可访问；
# $anonymous 表示未注册用户可访问；
# $authenticated 表示只有注册用户可访问
access: $all
# 允许所有注册用户发布/撤销已发布的软件包
# (注意：默认情况下任何人都可以注册)
publish: $authenticated
unpublish: $authenticated
# 如果私有包服务不可用在本地，则会代理请求到'npmjs'
proxy: npmjs
# 您可以指定传入连接的HTTP /1.1服务器保持活动超时（以秒为单位）。
# 值为0会使http服务器的行为类似于8.0.0之前的Node.js版本，后者没有保持活动超时。
# 解决方法：通过给定的配置可以解决以下问题
server:
keepAliveTimeout: 60
# 中间件
middlewares:
audit:
enabled: true
# 日志设置
logs: { type: stdout, format: pretty, level: http }
# 开放远程访问，允许所有IP
listen:
- 0.0.0.0:4873
这里我们来逐个认识一下默认配置中的几个值的含义：
字段 含义 storage 已发布的包的存储位置，默认存储在 ~/.config/Verdaccio/ 文件夹下 plugins 插件所在的目录 web 界面相关的配置 auth 用户相关，例如注册、鉴权插件（默认使用的是 htpasswd） uplinks 用于提供对外部包的访问，例如访问 npm、cnpm 对应的源 packages 用于配置发布包、删除包、查看包的权限 server 私有库服务端相关的配置 middlewares 中间件相关配置，默认会引入 auit 中间件，来支持 npm audit 命令 logs 终端输出的信息的配置
权限把控
权限把控指的是我们需要私有 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 的 registry.npmjs.org/ ）。而剩下的 3 个参数，都是用来设置包相关的权限，它有三个可选值 all（所有人）、all（所有人）、all（所有人）、anonymous（未注册用户）、$authenticated（注册用户）。那么，下面我们分别看一下这 3 个参数的含义：
access 控制包的访问权限 publish 控制包的发布权限 unpublish 控制包的删除权限显然，这里我们需要的是只有用户才能具备上述 3 个权限，即都设置为 $authenticated：
'@*/*': 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
部署
verdaccio提供了docker和全局包2种方式进行安装，下面是两种安装方式的详细步骤
docker部署
docker不太熟，感兴趣的可以去尝试。
# 拉取verdaccio docker镜像 $ docker pull verdaccio/verdaccio:nightly-master # 查看docker镜像 $ docker images REPOSITORY TAG IMAGE ID CREATED SIZE verdaccio/verdaccio nightly-master 32713721fda5 16 hours ago 580MB # 拷贝下面配置文件到本地~/docker/verdaccio目录 $ cp config.yaml ~/docker/verdaccio # 启动docker容器 # -d: 在后台开启docker进程 # --name: 给容器指定一个名称 # --p: 将本机的4873端口映射到docker的4873端口 # --restart=always: 自动重启容器 # -v: 将本地~/docker/verdaccio目录挂载到docker的/verdaccio/conf目录 $ docker run --restart=always -d -v ~/docker/verdaccio:/verdaccio/conf --name verdaccio -p 4873:4873 verdaccio/verdaccio # 查看docker容器 $ docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 6aac1ea8707a verdaccio/verdaccio "uid_entrypoint /bin…" 2 minutes ago Up 2 minutes 0.0.0.0:4873->4873/tcp, :::4873->4873/tcp verdaccio
这样我们就完成了verdaccio在docker上的部署，其中我们将~/docker/verdaccio这个文件夹挂载到docker的/verdaccio/conf文件夹，verdaccio在启动时会自动寻找/verdaccio/conf/config.yaml文件作为配置。
pm2部署
pm2 的部署相对于docker需要安装node。但是相对的部署起来会更快捷，可以根据自己需要选择。
管理npm仓库源
这里推荐使用nrm来管理npm的源
# 全局安装nrm
$ npm install -g nrm
# 添加私有库
$ nrm add verdaccio http://{地址}:4873/
# 查看现有的npm源
$ nrm ls
npm ---------- https://registry.npmjs.org/
yarn --------- https://registry.yarnpkg测试数据/
tencent ------ https://mirrors.cloud.tencent测试数据/npm/
cnpm --------- https://r.cnpmjs.org/
taobao ------- https://registry.npmmirror测试数据/
npmMirror ---- https://skimdb.npmjs测试数据/registry/
* verdaccio ---- http://{地址}:4873/
# 设置npm源
$ nrm use verdaccio
npm包发布
注册
# 注册用户，这里因为方便演示，所以没有关闭注册。Username：用户名 Password：密码
$ npm adduser
npm notice Log in on http://{地址}:4873/
Username: yourusername
Password:
Email: (this IS public) xxxxxx@qq测试数据
Logged in as yourusername on http://{地址}:4873/.
登录
# 登录用户
$ npm login
npm notice Log in on http://{地址}:4873/
Username: yourusername
Password:
Email: (this IS public) xxxxxx@qq测试数据
Logged in as yourusername on http://{地址}:4873/
# 查看当前登录用户
$ npm who am i
yourusername
发布
# 发布当前包 $ npm publish npm notice Hui-ui-vue@0.1.0 npm notice === Tarball Contents === npm notice 611B public/index.html npm notice 4.3kB public/favicon.ico npm notice 73B babel.config.js npm notice 151B packages/baseInput/index.js npm notice 214B packages/index.js npm notice 130B examples/main.js npm notice 730B vue.config.js npm notice 891B package.json npm notice 310B README.md npm notice 6.8kB examples/assets/logo.png npm notice 344B examples/App.vue npm notice 199B packages/baseInput/src/baseInput.vue npm notice 2.0kB examples/components/HelloWorld.vue npm notice === Tarball Details === npm notice name: Hui-ui-vue npm notice version: 0.1.0 npm notice package size: 10.5 kB npm notice unpacked size: 16.8 kB npm notice shasum: 08de3054edbef6c1706f849e40d05e99c16c607e npm notice integrity: sha512-6sVp52WobtHhq[...]bXfgebrphWd+Q== npm notice total files: 13 npm notice + Hui-ui-vue@0.1.0 # 最后看到 + [你的包名@版本号]既可
需要注意的是相同的包上传时版本号需要不同，否则上传会失败。
删除
进入包文件路径直接删除即可。
以上就是pm2与Verdaccio搭建私有npm库过程详解的详细内容，更多关于pm2 Verdaccio搭建npm库的资料请关注其它相关文章！
查看更多关于pm2与Verdaccio搭建私有npm库过程详解的详细内容...