HTML5教程

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

本文主要是介绍前端工程化之路(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

启动服务

verdaccio

运行.gif

服务启动成功后浏览器访问 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...

这篇关于前端工程化之路(1)- 使用 verdaccio 搭建私有npm库的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!