前端工程化之路（1）- 使用 verdaccio 搭建私有npm库

服务端安装部署

安装

本文书写时 verdaccio 最新版本是 4.4.1
其依赖 NodeJs 8.x 及其以上 、python 2.7及其以上 版本，推荐都装最新的

打开终端，全局安装：

# Windows下以管理员模式打开cmd
npm install -g verdaccio
# mac 或者 linux
sudo npm install -g verdaccio

启动服务

verdaccio

服务启动成功后浏览器访问 http://localhost:4873/ 即可，so easy

这里需要注意的是启动时第一行的打印信息:

 warn --- config file  - C:\Users\tiany\AppData\Roaming\verdaccio\config.yaml

这里输出的 config.yaml 就是 verdaccio 的配置文件

如果你需要 verdaccio 服务在你的服务器后台运行，参照这里配置进程守护

配置

默认配置解读

用编辑器打开 config.yaml 配置文件，我对其作用进行了一些注释解读:

#
# This is the default config file. It allows all users to do anything,
# so don't use it on production systems.
#
# Look here for more config file examples:
# https://github.com/verdaccio/verdaccio/tree/master/conf
#

# 用户下载安装的包都被缓存在此配置的目录
storage: ./storage
# 插件所在目录
plugins: ./plugins

# 定制 Web 界面
web:
  # 访问服务主页时（http://localhost:4873/），网页标签的title名称，可改成公司名称
  title: JK724包管理中心
  # Gravatar 头像支持，默认关闭，可打开（http://cn.gravatar.com/）
  gravatar: true
  # 默认情况下package 是升序自然排序的， 可选值： asc 或 desc
  # sort_packages: asc

auth:
  htpasswd:
    # 存储了加密认证信息的 htpasswd 文件
    file: ./htpasswd
    # 允许注册的用户最大数量, 默认值是 "+inf"，即不限制
    # 可以将此值设置为-1 以禁用新用户注册。
    # max_users: 1000

# 如果你要安装的包在私有的npm库里没有找到，就去下面的服务列表里找
uplinks:
  npmjs:
    url: https://registry.npmjs.org/

packages:
  '@*/*':
    # scoped 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

# You can specify HTTP/1.1 server keep alive timeout in seconds for incoming connections.
# A value of 0 makes the http server behave similarly to Node.js versions prior to 8.0.0, which did not have a keep-alive timeout.
# WORKAROUND: Through given configuration you can workaround following issue https://github.com/verdaccio/verdaccio/issues/301. Set to 0 in case 60 is not enough.
server:
  keepAliveTimeout: 60

middlewares:
  audit:
    enabled: true

# 终端日志输出配置
logs:
  - { type: stdout, format: pretty, level: http }
  #- {type: file, path: verdaccio.log, level: info}
#experiments:
#  支持 npm token 命令
#  token: false

以上是 verdaccio 在启动时的默认配置，完整配置还需要去官网查看文档，但对于我们来说，目前迫切需要更改的配置的用户鉴权，毕竟私有npm仓就是不想外人访问或下载，而默认情况下是任何人都可以注册和查看的的，而一旦注册就有了发包的权力

添加注册用户

verdaccio 的鉴权模块是使用 htpasswd插件 实现的，对权限的配置比较简单，不支持给某个具体的用户设置细分权限(比如访问权限、发布权限),不过对于我们公司的情况来说够用了。

1. 添加新账户，执行完命令后会让你输入 用户名、密码

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

2. 禁用注册。修改 config.yaml 文件,放开 max_users 选项：

   auth:
     htpasswd:
       # 存储了加密认证信息的 htpasswd 文件
       file: ./htpasswd
       # 允许注册的用户最大数量, 默认值是 "+inf"，即不限制
       # 可以将此值设置为-1 以禁用新用户注册。
       max_users: -1

3. 更改 package 权限，只有注册用户可访问、发布包:

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

4. 重启 verdaccio 服务

修改web用户UI

config.yaml 配置中也提供了web用户界面相关UI元素的修改，logo,主题色等，具体点击这里

客户端使用

1. 登录（如果未禁用注册，输入不存在的账号，会自动注册）

   ## 具体场景中，http://localhost:4873 改成npm私有服务器所在的ip地址
   npm adduser --registry http://localhost:4873

2. 发布

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

参考文档

https://verdaccio.org/docs/zh...