dumi + lerna + verdaccio + docker 菜鸟老手最近对技术xuewei多了点激情，那就赶紧动

希望自己每周都能有点进步。

第一周打卡

菜鸟老手最近对技术xuewei多了点激情，那就赶紧动手！

利用 dumi 写了一个组件库文档，发布上线了~

又用 verdaccio 搭建了npm私服通过 docker 发布了，以后可以从私服下载自己写的包啦~

1. 通过dumi+lerna搭建组件库

①. 新建组件库文件夹myapp

    mkdir myapp && cd myapp

②. 项目初始化（两种方式：文档/站点具体可见dumi官网）

    //这边是采用的文档模式
    yarn create @umijs/dumi-app

③. `lerna` 初始化

    // 安装lerna
    npm i -g lerna
    // 初始化 
    // `--independent` /`-i` – 使用独立的版本控制模式,可单独控制每个包的版本号。
    lerna init --independent

④. 通过 `lerna` 在项目中新增子包 resize

   lerna create resize
   // 在 resize 中增加 DragBaseTable子包
   lerna create DragBaseTable packages/resize

给子包 resize 添加依赖 react-resizable

   lerna add react-resizable packages/resize

⑤. 其他配置比如 index.md/demo/test 可以参考dumi官网

⑥. 启动dumi

    yarn start

此时报错，修改.fatherr.ts 配置信息后，重启成功

export default {
  // more father 4 config: https://github.com/umijs/father-next/blob/master/docs/config.md
  esm: {
    transformer: 'babel',
    output: 'dist/esm',
    input: 'packages',
  },
};

⑦. 此时通过 localhost:8000 已经能看到网站了

ps: 运行 npm run docs:build,把docs-dist的文件部署到服务器，配置相应nginx，就可以在线上访问了

2. 通过docker搭建 verdaccio(官网都有) 私服

①. 进入服务器通过 `docker` 拉取 `verdaccio` 镜像（默认为最新）

    docker pull verdaccio/verdaccio

②. 建文件夹 , 目录都是对应本地构建 `verdaccio` 所生成的目录

    mkdir verdaccio
    cd verdaccio
    mkdir storage
    mkdir plugins
    mkdir config
    cd storage 
    ...

③. 修改 `config.yml` 内容，主要是修改一下几个文件的路径

#
# This is the default configuration file. It allows all users to do anything,
# please read carefully the documentation and best practices to
# improve security.
#
# Look here for more config file examples:
# https://github.com/verdaccio/verdaccio/tree/5.x/conf
#
# Read about the best practices
# https://verdaccio.org/docs/best

# path to a directory with all packages
 # **************************路径修改****************************
storage: /verdaccio/storage/data
# path to a directory with plugins to include
 # **************************路径修改**************************
plugins: /verdaccio/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: /verdaccio/storage/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

# https://verdaccio.org/docs/configuration#uplinks
# a list of other known repositories we can talk to
uplinks:
  npmjs:
    url: https://registry.npmjs.org/

# Learn how to protect your 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

  '**':
    # allow all users (including non-authenticated users) to read and
    # publish all packages
    #
    # you can specify usernames/groupnames (depending on your auth plugin)
    # and three keywords: "$all", "$anonymous", "$authenticated"
    access: $all

    # allow all known users to publish/publish packages
    # (anyone can register by default, remember?)
    publish: $authenticated
    unpublish: $authenticated

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

# To improve your security configuration and  avoid dependency confusion
# consider removing the proxy property for private packages
# https://verdaccio.org/docs/best#remove-proxy-to-increase-security-at-private-packages

# https://verdaccio.org/docs/configuration#server
# 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
  # 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'

# https://verdaccio.org/docs/configuration#offline-publish
# publish:
#   allow_offline: false

# https://verdaccio.org/docs/configuration#url-prefix
# url_prefix: /verdaccio/
# VERDACCIO_PUBLIC_URL='https://somedomain.org';
# url_prefix: '/my_prefix'
# // url -> https://somedomain.org/my_prefix/
# VERDACCIO_PUBLIC_URL='https://somedomain.org';
# url_prefix: '/'
# // url -> https://somedomain.org/
# VERDACCIO_PUBLIC_URL='https://somedomain.org/first_prefix';
# url_prefix: '/second_prefix'
# // url -> https://somedomain.org/second_prefix/'

# https://verdaccio.org/docs/configuration#security
# security:
#   api:
#     legacy: true
#     jwt:
#       sign:
#         expiresIn: 29d
#       verify:
#         someProp: [value]
#    web:
#      sign:
#        expiresIn: 1h # 1 hour by default
#      verify:
#         someProp: [value]

# https://verdaccio.org/docs/configuration#user-rate-limit
# userRateLimit:
#   windowMs: 50000
#   max: 1000

# https://verdaccio.org/docs/configuration#max-body-size
# max_body_size: 10mb

# https://verdaccio.org/docs/configuration#listen-port
# 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

# The HTTPS configuration is useful if you do not consider use a HTTP Proxy
# https://verdaccio.org/docs/configuration#https
# https:
#   key: ./path/verdaccio-key.pem
#   cert: ./path/verdaccio-cert.pem
#   ca: ./path/verdaccio-csr.pem

# https://verdaccio.org/docs/configuration#proxy
# http_proxy: http://something.local/
# https_proxy: https://something.local/

# https://verdaccio.org/docs/configuration#notifications
# notify:
#   method: POST
#   headers: [{ "Content-Type": "application/json" }]
#   endpoint: https://usagge.hipchat.com/v2/room/3729485/notification?auth_token=mySecretToken
#   content: '{"color":"green","message":"New package published: * {{ name }}*","notify":true,"message_format":"text"}'

middlewares:
  audit:
    enabled: true

# https://verdaccio.org/docs/logger
# log settings
logs: { type: stdout, format: pretty, level: http }
#experiments:
#  # support for npm token command
#  token: false
#  # disable writing body size to logs, read more on ticket 1912
#  bytesin_off: false
#  # enable tarball URL redirect for hosting tarball with a different server, the tarball_url_redirect can be a template string
#  tarball_url_redirect: 'https://mycdn.com/verdaccio/${packageName}/${filename}'
#  # the tarball_url_redirect can be a function, takes packageName and filename and returns the url, when working with a js configuration file
#  tarball_url_redirect(packageName, filename) {
#    const signedUrl = // generate a signed url
#    return signedUrl;
#  }

# translate your registry, api i18n not available yet
# i18n:
# list of the available translations https://github.com/verdaccio/verdaccio/blob/master/packages/plugins/ui-theme/src/i18n/ABOUT_TRANSLATIONS.md
#   web: en-US

④. vim docker-compose.yaml 保存内容

    version: '3'  
    services:  
    verdaccio:  
    image: verdaccio/verdaccio  
    container_name: "verdaccio"  
    networks:  
    - node-network  
    environment:  
    - VERDACCIO_PORT=4873  
    ports:  
    - "4873:4873"  
    volumes:  
    # 注意路径的对应
    - "./storage:/verdaccio/storage"  
    - "./config:/verdaccio/conf"  
    - "./plugins:/verdaccio/plugins"  
    networks:  
    node-network:  
    driver: bridge

⑤. docker compose up -d 后台启动任务

docker compose V2：docker与compose之间是空格，不是中横线

⑥. 打开网页服务器地址xx.xx.xx.：4873

3. 把组件库publish到verdaccio

①. 修改package.json

     "publishConfig": {
        "registry": "http://xx.xx.xx.xx:4873/"
      }

②. 新增私服npm用户，输入用户、密码、邮箱

   nrm add newNpm xx.xx.xx.xx:4873
   nrm use newNpm
   npm adduser

③. 用户密码生成, 放入htpasswd

④. 先push代码，再发布。

     lerna publish

⑤. 发布成功之后，刷新 4873网页能看到已发布的组件。切换npm源后，就可以在自己项目里拉取发布的私有包啦。

🤗 参考文章（感恩）：

# 从0到1搭建monorepo组件库(基于dumi、lerna、father-build)

# 使用dumi创建组件库(下)

# 使用docker起一个verdaccio的容器

菜鸟一枚，很多的地方都钻研的不够深，欢迎大家积极讨论~

dumi + lerna + verdaccio + docker