关于前端:手摸手教你搭建npm私有库

最近终于有工夫能够做一些业务需要之外的货色了，就把组件库需要提上了日程。

对于一些不适宜开源的组件，我想到了 搭建公有 npm 仓库。

于是我跑去征询了一下有教训的大佬，大佬微微一笑，说：verdaccio。

这是个啥？

果决关上 github 搜寻关键词，果然不出我所料，这是一个坐拥 11.8kstar 的开源库（https://github.com/verdaccio/verdaccio）。

总而言之，这是一个搭建 npm 仓库的工具。

出于好奇，我去维基百科了一下这个单词：

verdaccio 是意大利语，意为彩色、红色和黄色颜料的混合物，其色彩为淡灰色或淡黄色，柔和的绿褐色。

这个词起源壁画，是壁画中的一种「底色」，在底色之上能够更好地去渲染其余色彩。作者之所以起这个名字，其实是因为 verdaccio 的前身是sinopia（也是一个开源的 npm 仓库搭建工具），而 sinopia 意思是壁画底色中的红土色或铁锈色。

不采纳 sinopia 的起因也很简略，这个我的项目比拟古老，最近一次更新曾经是 6 年前了。。。

话不多说，间接开撸。

装置运行

verdaccio 有两种装置办法，一种是间接装置，一种是用 docker 镜像。

1.1 间接装置

npm install --global verdaccio@6-next --registry https://registry.verdaccio.org/

装置实现后，就能够在 /node/bin 目录下看到一个名为 verdacio 的文件，这个文件理论指向的是 verdaccio 包下的build/lib/cli.js。

// cli.js
#!/usr/bin/env node
"use strict";
if (process.getuid && process.getuid() === 0) {process.emitWarning(`Verdaccio doesn't need superuser privileges. don't run it under root`);
} // eslint-disable-next-line import/order
const logger = require('./logger');
logger.setup(null, {logStart: false}); // default setup
require('./cli/cli');
process.on('uncaughtException', function (err) {
  logger.logger.fatal({err: err}, 'uncaught exception, please report this\n@{err.stack}');
  process.exit(255);
});

• #!/usr/bin/env node(看到这句的我就晓得事件并不简略) 这句是通知零碎得用 node 来执行这个脚本文件；
• process.getuid()会返回运行过程的用户 id，当为 0 时会提醒不要运行在 root 用户下（root 用户 id=0）；
• logger是 verdaccio 我的项目下的一个日志模块，当过程捕捉到异样时，就会去更新日志并完结以后过程；
• require('./cli/cli')会去加载 cli 文件，这个文件里会进行一些初始化操作，比方读取.yaml 或.yml 配置文件的信息，去设置对应的页面题目、图标等信息，创立 node 服务器并监听配置的端口 (如默认配置的 4873) 等等，通过这一系列简单的操作之后，咱们就能够间接运行 verdaccio 并通过端口号拜访到对应的页面。

1.2 间接运行

运行 verdaccio：

verdaccio

运行胜利！

如果是本地装置，关上浏览器，输出http://localhost:4873，就能够看到页面：

留神：

1. 如果是在服务器上安装，则须要在配置文件中增加listen: 0.0.0.0:4873（详见下文中的配置文件），再通过 IP+4873 端口号在线拜访。
2. 如果应用的是云服务器，还需注意防火墙规定：

1.3 pm2 守护过程后盾运行

在命令行间接运行 verdaccio，过程敞开后就无法访问到页面，所以这里举荐应用 pm2 守护过程，通过 pm2 可让 verdaccio 在后盾运行。

pm2 官网：https://pm2.keymetrics.io/

运行 verdaccio：

pm2 start verdaccio

进行 verdaccio：

pm2 stop verdaccio

2.1 docker 装置

docker pull verdaccio/verdaccio:nightly-master

2.2 docker 运行

docker run -it --rm --name verdaccio -p 4873:4873 verdaccio/verdaccio

成果和间接装置一样，在浏览器关上链接可拜访到页面。

权限配置

搭建是搭建好了，然而怎么管制拜访权限？

在官网文档里提到了 verdaccio 应用了一个名为 htpasswd 的插件来做权限配置，默认的配置文件是 verdaccio 装置目录下的config.yaml。

官网文档上有对配置项的具体阐明：https://verdaccio.org/docs/en/configuration。

这是我的配置文件：

auth:
  htpasswd:
    file: ./htpasswd
    # Maximum amount of users allowed to register, defaults to "+inf".
    # You can set this to -1 to disable registration.
    max_users: -1

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

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


  '**':
    access: $authenticated
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs

server:
  keepAliveTimeout: 60

middlewares:
  audit:
    enabled: true

logs: {type: stdout, format: pretty, level: http}

listen: 0.0.0.0:4873

配置项阐明：

• access（拜访权限）、publish（公布权限）、unpublish（勾销公布权限）可选值如下：

  • $all：任意用户；
  • $anonymous：仅匿名用户；
  • $authenticated：仅受权用户。
• max_users:-1，不容许用户注册（此时执行 npm adduser 会报 409 谬误；因而需先正文掉这句，在本地注册完用户后再设置为 -1）
• listen: 0.0.0.0:4873，没有这句就只能在本地拜访，加上这句才能够通过 ip+ 端口号在线拜访。

批改完配置文件后，重启 verdaccio 失效：

verdaccio -c config.yaml

此时只有登录了 verdaccio 的用户能力对仓库里的包进行操作。

npm 登录：npm adduser --registry http://xxx.xx.xxx:4873

公布包：npm publish --registry http://xxx.xx.xxx:4873

勾销公布：npm unpublish 包名 --registry http://xxx.xx.xxx:4873（如果是 24h 内公布的包，须要加上 –force）

下载包：npm install 包名 --registry http://xx.xx.xxx:4873

设为镜像源

npm set registry http://xx.xx.xxx:4873/

执行这句就能够把 verdaccio 设为本地全局镜像源，如果在仓库中找不到对应的包，verdaccio就会去 npm 官网仓库尝试拉取对应的包，拉取胜利后会缓存在 storage 目录下（压缩包格局）。