目录

StoryBook + Lerna 开发自己的UI组件库(二)

上一篇已经介绍了storybook项目的基本搭建,现在我们要做的是将这个组件库发布,以及从公共仓库中拉取组件库代码。组件库发布,可以选择使用npm官方提供的发布方式,需要你自己注册账号、密码,对于企业版当然要收费。这里使用verdaccio去搭建npm私有库,并且使用lerna去管理所有组件库

1.verdaccio的安装与配置

1.1.基本安装

首先npm install –g verdaccio,安装好后输入verdaccio运行,verdaccio默认监听4873端口,如果需要修改配置,请打开verdaccio/config.yaml修改,这个配置文件包含了verdaccio所有的配置。服务运行效果如下

https://i.loli.net/2021/08/28/FVOPUWxdsS7eInN.png

1.2.账号的注册

首先将npm的资源库地址执行本地的verdaccio(http://127.0.0.1:4873)

1
npm set registry http://127.0.0.1:4873
注意
这里将全局的npm仓库设置到本地,只为调试使用,之后记得改回来

然后添加用户名、密码、email

1
npm adduser -registry http://127.0.0.1:4873

注册完了之后可以npm who am i看下是否注册成功,这就意味着在我本地就可以用这个账号发布npm包了

2.lerna的使用

lerna是一个管理工具,用于管理包含多个软件包(package)的JavaScript项目。首先要明白一个概念,lerna是可以管理多个仓库的工具,默认情况下,它会管理你项目中packages目录中所有的npm仓库。

2.1.lerna的初始化与配置

首先全局安装lerna

1
npm install --global lerna

然后进入我们的项目,执行lerna init,将其初始化成一个lerna管理的git仓库

1
lerna init

此时我们的项目里面会多出来一个lerna.json文件,这个文件是用来配置lerna管理的仓库的地址的,把他修改下,设置lerna发布npm包的时候,添加到我们本地verdaccio

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
  "packages": [
    "packages/*" // 管理packages目录下的仓库
  ],
  "npmClient": "yarn",
  "useWorkspaces": true,
  "version": "independent",
  "command": {
    "publish": {
      "ignoreChanges": [
        "{__tests__,tests}/**/*.{js,jsx,ts,tsx}",
        "*.mdx",
        "*.md"
      ],
      "message": "chore(release): publish [skip ci]",
      "registry": "http://127.0.0.1:4873/"
    },
    "version": {
      "message": "chore(release): publish new version [skip ci]",
      "conventionalCommits": true
    }
  },
  "bootstrap": {
    "npmClientArgs": [
      "--no-package-lock"
    ]
  }
}

对了还需要添加lerna的build的命令,在package.json中添加"build": "lerna run build"

2.2.lerna项目关联git仓库

现在本地的storybook项目需要关联一个git仓库,这样的话,在publish的时候,lerna会从这个远程git仓库去拉取代码然后推送到http://127.0.0.1:4873/verdaccio中。这里我在github上创建了一个模板项目,与本地项目作关联

1
git remote add origin https://github.com/sentianc/storybook-template.git

2.3.原有项目的目录改造

现在将项目整体目录进行改造,将所有的组件库代码放入packages目录中,每个组件库管理自己的依赖,最外层定义storybook的基本配置,这里我创建一个叫ui-mobile的组件库,将之前写的button组件以及storybook的mdx文件移过去。因为是组件库,所以要有一个index文件将所有的组件抛出,修改后整体的项目目录

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
├─.DS_Store
├─.editorconfig
├─.eslintignore
├─.eslintrc.js
├─.gitignore
├─lerna.json
├─package-lock.json
├─package.json
├─yarn.lock
├─packages
|    ├─ui-mobile
|    |     ├─src
|    |     |  ├─index.tsx
|    |     |  ├─global-style
|    |     |  |      ├─index-mobile.less
|    |     |  |      ├─index.less
|    |     |  |      ├─normalize-mobile.less
|    |     |  |      ├─normalize.less
|    |     |  |      ├─antd-mobile
|    |     |  |      |      ├─anim.less
|    |     |  |      |      ├─component.less
|    |     |  |      |      ├─index.less
|    |     |  |      |      ├─mixins.less
|    |     |  |      |      └theme.less
|    |     |  |      ├─antd
|    |     |  |      |  ├─component.less
|    |     |  |      |  ├─dark.less
|    |     |  |      |  ├─index.less
|    |     |  |      |  ├─mixins.less
|    |     |  |      |  └theme.less
|    |     |  ├─components
|    |     |  |     ├─index.tsx
|    |     |  |     ├─button
|    |     |  |     |   ├─index.less
|    |     |  |     |   ├─index.stories.mdx
|    |     |  |     |   └index.tsx
├─.vscode
|    └settings.json
├─.storybook
|     ├─main.js
|     └preview.js

2.4.组件库的打包配置

现在目录已经改了,思考一下,这个组件库还要定外的打包编译成dist,然后再发布,那这里使用的工具选择为tsdx,tsdx是专门管理用ts写的npm组件库,它甚至提供了react-storybook模板。那将原来的ui-mobile目录删除,使用npx tsdx create ui-mobile去创建一个tsdx项目,这里选择react模板就行。然后再将之前组件库代码移过去

注意
这里还有个问题:将这些项目目录调整之后,记得将.storybook/main.js.storybook/preview.js中的入口文件以及引入的全局样式修改一下

2.5.组件库的发布

至此组件库已经基本搭建完成,接下来要做的:
1.使用tsdx打包编译组件库到dist目录npm run build
2.将代码提交到git仓库
3.lerna publish将组件库推送到本地verdaccio(在这步执行的时候,记得在根目录package.json里面添加yarn的workspaces)

1
2
3
"workspaces": [
  "packages/*"
],

publish 成功的效果

https://i.loli.net/2021/08/28/YrhU1zW9FtJjsip.png

然后打开http://127.0.0.1:4873/,看下组件库是否发布成功

https://i.loli.net/2021/08/28/ATp49UxwvgC7eF5.png

可以看到我这里已经发布成功了,那么后续就可以npm install ui-mobile去安装这个依赖并且使用了,这就是整个流程

3.总结

这些示例都是在本地环境做的,真正的开发环境应该是在服务器里去部署这些服务,并且公司内部一般会用gitlab去做项目的管理。storybook + lerna的确是一个好的管理组件库的解决方案,也可以参考下我的模板https://github.com/sentianc/storybook-template