Skip to main content

物料库发包工作流

Verdaccio

一 介绍​

1. lerna​

Lerna 是一个管理 JavaScript 项目的工具，它可以优化在多包仓库(multi-package repositories)中管理多个包(package)的工作流。多包仓库又称为 monorepo（单一仓库），其特点是将多个相关的项目放在一个 Git 仓库中，但每个项目有自己的目录和 package.json 文件。

info

在爱集微 Monorepo 中，组件库中常用 lerna version 和 lerna publish 来进行发包。详见：四 发包

2. verdaccio​

Verdaccio 是一个轻量级的私有 npm 代理注册表 (private npm proxy registry)，允许你在本地设置一个 npm 存储库。这对于多种场景都非常有用，例如：当你正在开发一个尚未发布的 npm 包，或者在没有互联网连接的环境中需要一个可靠的 npm 源时。

info

在爱集微 Monorepo 中，Verdaccio 安装到 47.119.124.57 服务其中，所有的包都发布到该服务器中。如需有发包权限详见：三 注册及本地登录

3. storybook​

Storybook 是一个开源的 UI 组件开发工具，用于 React、Vue、Angular 等多个前端框架。它提供了一个沙盒环境，使开发者可以独立于应用程序的其他部分来开发和测试 UI 组件。这种方法被称为组件驱动的开发（Component-Driven Development，CDD）。

info

在爱集微组件库中，利用的 storybook 进行开发，分成 componet-react 为业务组件库，component-vue 为业务组件库。一些细节详见：组件库规范

4. chromatic​

Chromatic 是一款与 Storybook 紧密集成的工具，专为版本控制和自动化 UI 测试而设计。它使用你在 Storybook 中定义的组件故事（stories）为基础来创建可视的测试，确保 UI 组件的外观和行为在各种交互和状态下都是如预期的。

info

在爱集微组件库中，可进行外部链接查看组件库的效果以及自动化组件测试和 UI 测试。如需了解 storybook 的打包流程详见：五 Build

二 Merge​

首先要注意的是，master 分支和 development 分支都是进行 gitlab 的 CI 。请注意master,development不要相互 merge。

如图，dev-A、dev-B、dev-C 分别为三个不同组件的分支，分别进行开发，开发完成后。选择发布正式包或者测试包，在发包后shell脚本自动merge到对应的分支。

如果遇到大型组件，需要多人进行开发。假设 dev-B 为大型组件的分支。那么需要多人进行开发，可创建分支为 dev-B-xxx。切记，不要将 dev-B-xxx 上进行发包。

info

自动merge到对应的分支的意思是，如果发布测试包自动merge到development分支，如果发布正式包自动merge到master分支。

Verdaccio

三 注册及本地登录​

首先联系管理员，将你的 gitlab 账号添加到 verdaccio 的 htpasswd 中。然后进行注册，注册完成后，进行本地登录。

# 注册 - 47.119.124.57服务器
npm adduser --registry https://verdaccio.ijiwei.com/
# 本地登录
npm login --registry https://verdaccio.ijiwei.com/
# 本地查看登录信息
npm whoami --registry https://verdaccio.ijiwei.com/
info

当前，verdaccio 没有进行权限的限制，如果以后需要再进行添加。

四 发包​

首先要分清楚“正式包”和“测试包”

info

正式包例如 @ijiwei/xxx@1.0.0

测试包例如 @ijiwei/xxx@1.0.0-apla.0

1. 发布测试包​

首先，发布测试包要在上面举例的分支，例如 dev-A、dev-B、dev-C 分支进行发布测试包。

pnpm lerna:prerelease

发布成功后，钉钉群会有提示。

2. 发布正式包​

首先，发布正式包要在上面举例的分支，例如 dev-A、dev-B、dev-C 分支进行发布正式包。

pnpm lerna:release

发布成功后，钉钉群会有提示。

五 Build​

把组件库中的组件打包发布到 chromatic。通过发包自动 git merge 分别到 master 和 development 进行，gitlab CI 进行打包发布。其中执行自动化组件测试和打包发布到 chromatic。

其中在 development 分支进行打包发布到 chromatic，这里。可进行 UI 走查和评论，同意后 chromatic 进行 build 。

在 master 分支进行打包发布到 chromatic。也是一样的，主要是展示给外部人员看的。

info
  1. 自动化组件测试没有进行，等待调整。
  2. UI 走查和评论没有安排人员，等待调整。