[Front-end engineering] Verdaccio builds a local npm warehouse

background

Verdaccio is a lightweight private npm proxy registry created by Node.js

When we develop npma package, we often need to verify the contracting process, or when the developed npmpackage is limited to the internal use of the company, we can use it to Verdacciobuild a npmwarehouse. After building, as long as npm installthe source address is changed to point to the warehouse address, the two functions proposed above can be realized.

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

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

practice

# 全局安装
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

Open http://localhost:4873/ :

insert image description here

verdaccio\config.yamlis the warehouse configuration file
verdaccio\htpasswdWhen the user registers, the user information will be recorded
storageAll uploaded packages will be saved here~

Here verdaccio\config.yamlare a few more commonly used configuration items:

# 设置用户上传包的存放目录
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

Next, register an account first

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

Enter the account password, and then go to http://localhost:4873/ to log in and find that the login is successful, and htpasswda file will be generated under the directory

Here is a very useful tool to recommend: nrm , which can help you switch sources at any time~

In this way, after we have developed a package locally npm, we can switch npmthe source to the local npmwarehouse, and npm publishthen execute it to npmpublish the package to the local npmwarehouse~

reference

If there are any mistakes, please point them out, thank you for reading~