前端工程化Verdaccio搭建本地npm仓库

背景

Verdaccio 是一个 Node.js创建的轻量的私有npm proxy registry

我们在开发npm包的时候，经常需要验证发包流程，或者开发的npm包仅局限于公司内部使用时，就可以借助Verdaccio搭建一个npm仓库，搭建完之后，只要更改npm install的源地址，指向该仓库地址，就可以实现上述提出的两个功能。

# 例如
npm set registry http://localhost:4873

# 或者
npm install lodash --registry http://localhost:4873

实践

# 全局安装
npm i verdaccio -g

# 运行
verdaccio

# 这时候会打印出verdaccio安装的位置信息
# 比如 
# info --- config file  - \verdaccio\config.yaml
# info --- using htpasswd file: \verdaccio\htpasswd
# info --- plugin successfully loaded: verdaccio-htpasswd
# info --- plugin successfully loaded: verdaccio-audit
# warn --- http address - http://localhost:4873/ - verdaccio/5.25.0

打开http://localhost:4873/：

• verdaccio\config.yaml 是仓库的配置文件
• verdaccio\htpasswd 当用户注册之后，会记录用户信息
• storage所有上传的包都会保存在这里~

关于verdaccio\config.yaml这里说几个比较常用的配置项：

# 设置用户上传包的存放目录
storage: ./storage
#  插件目录
plugins: ./plugins

# 前端页面的配置,可以设置如下参数，详见https://verdaccio.org/docs/webui
web:
  title: Verdaccio
  # comment out to disable gravatar support
  # gravatar: false
  # by default packages are ordercer ascendant (asc|desc)
  # sort_packages: asc
  # convert your UI to the dark side
  # darkMode: true
  # html_cache: true
  # by default all features are displayed
  # login: true
  # showInfo: true
  # showSettings: true
  # In combination with darkMode you can force specific theme
  # showThemeSwitch: true
  # showFooter: true
  # showSearch: true
  # showRaw: true
  # showDownloadTarball: true
  #  HTML tags injected after manifest <scripts/>
  # scriptsBodyAfter:
  #    - '<script type="text/javascript" src="https://my.company.com/customJS.min.js"></script>'
  #  HTML tags injected before ends </head>
  #  metaScripts:
  #    - '<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>'
  #    - '<script type="text/javascript" src="https://browser.sentry-cdn.com/5.15.5/bundle.min.js"></script>'
  #    - '<meta name="robots" content="noindex" />'
  #  HTML tags injected first child at <body/>
  #  bodyBefore:
  #    - '<div id="myId">html before webpack scripts</div>'
  #  Public path for template manifest scripts (only manifest)
  #  publicPath: http://somedomain.org/

# 设置账号相关的内容 https://verdaccio.org/docs/configuration#authentication
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: 1000
    # Hash algorithm, possible options are: "bcrypt", "md5", "sha1", "crypt".
    # algorithm: bcrypt # by default is crypt, but is recommended use bcrypt for new installations
    # Rounds number for "bcrypt", will be ignored for other algorithms.
    # rounds: 10
    
#  设置上游匹配，主要用于包匹配不到时，系统该往哪里去找这个包
uplinks:
  npmjs:
    url: https://registry.npmjs.org/

# packages 包相关配置，用于设置包的上传、下载、访问的权限控制
# https://verdaccio.org/docs/protect-your-dependencies/
# https://verdaccio.org/docs/configuration#packages
packages:
  '@*/*':
    # scoped packages
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs

  '**':
    # $all 所有登录、未登录者都可以访问
    # $authenticated 只有登录者可以访问
    # $anonymous 未登录可以访问
    # a、b、v等 指定用户名、只有该用户可以访问
    access: $all

    # 发布权和取消发布权
    publish: $authenticated
    unpublish: $authenticated

    # if package is not available locally, proxy requests to 'npmjs' registry
    proxy: npmjs

# 服务器的相关配置
server:
  keepAliveTimeout: 60
  # Allow `req.ip` to resolve properly when Verdaccio is behind a proxy or load-balancer
  # See: https://expressjs.com/en/guide/behind-proxies.html
  # trustProxy: '127.0.0.1'

# 端口号配置
# listen:
# - localhost:4873            # default value
# - http://localhost:4873     # same thing
# - 0.0.0.0:4873              # listen on all addresses (INADDR_ANY)
# - https://example.org:4873  # if you want to use https
# - "[::1]:4873"                # ipv6
# - unix:/tmp/verdaccio.sock    # unix socket

# https的配置
# https://verdaccio.org/docs/configuration#https
# https:
#   key: ./path/verdaccio-key.pem
#   cert: ./path/verdaccio-cert.pem
#   ca: ./path/verdaccio-csr.pem

middlewares:
  audit:
    enabled: true

# https://verdaccio.org/docs/logger
# log settings
log: { type: stdout, format: pretty, level: http }

# 设置语言
# i18n
#   web: en-US

接下来先注册一下账号

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

输入账号密码，之后再去http://localhost:4873/登录发现登录成功，且目录下面会生成htpasswd文件

这里推荐一个挺好用的工具：nrm，这样可以帮你随时切换源~

这样我们在本地开发完一个npm包之后，可以切换npm源成本地npm仓库，然后执行npm publish即可，即可将npm包发布到本地的npm仓库中~

参考

• Verdaccio官网
• nrm

---

如有错误，欢迎指出，感谢阅读~

这篇好文章是转载于：学新通技术网