[Ingeniería de front-end] Verdaccio construye un almacén npm local

fondo

Verdaccio es un registro de proxy npm privado ligero creado por Node.js

Cuando desarrollamos npmun paquete, a menudo necesitamos verificar el proceso de contratación, o cuando el npmpaquete desarrollado se limita al uso interno de la empresa, podemos usarlo para Verdaccioconstruir un npmalmacén. Una vez que se completa el edificio, siempre que npm installse cambie la dirección de origen para que apunte a la dirección del almacén, se pueden realizar las dos funciones propuestas anteriormente.

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

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

práctica

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

Abra http://localhost:4873/ :

inserte la descripción de la imagen aquí

verdaccio\config.yamles el archivo de configuración del almacén
verdaccio\htpasswdCuando el usuario se registre, la información del usuario será registrada
storageTodos los paquetes cargados se guardarán aquí~

Aquí verdaccio\config.yamlhay algunos elementos de configuración de uso más común:

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

A continuación, registre una cuenta primero

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

Ingrese la contraseña de la cuenta y luego vaya a http://localhost:4873/ para iniciar sesión y encontrar que el inicio de sesión fue exitoso, y se generará htpasswdun archivo en el directorio

Aquí hay una herramienta muy útil para recomendar: nrm , que puede ayudarlo a cambiar de fuente en cualquier momento ~

De esta manera, después de haber desarrollado un paquete localmente npm, podemos cambiar npmla fuente al npmalmacén local y npm publishluego ejecutarlo para npmpublicar el paquete en el npmalmacén local ~

referencia

Si hay algún error, indíquelo, gracias por leer ~