背景
admin 新旧平台组件管理不够清晰, 部分组件散布在各个业务模块代码下, 不便管理, 没有统一的 list, 不熟悉的话容易出现重复开发, 也会造成 admin 工程越来越庞大;
目标
组件抽离, 结合 storybook, 让组件状态可视化, 便于组件管理和复用, 同时也方便设计的同事参考.
- 建立 admin 组件库
- 建立 admin storybook - 可独立运行, 也可暴露文档至
klk-story展示
现状
- 已对 admin 组件做了 初步梳理 (待补充)
- 在admin项目中编写了部分 story, 需要抽离出来. 文档: Admin Storybook
初步方案
klk-story 工程提供了一套开发方式, 将组件库放在 klk-story 工程下开发, 同时 story 文档也在klk-story下编写.
但 admin 方面希望可以做到分开独立维护, 初步的方案是新建一个独立的工程, 将组件库 (admin-ui) 和 story (admin-story) 封装成两个包, 发布到knpm , 独立于 klk-storybook 项目.
klk-story 可以通过安装 admin-story 文档包来集中展示 story 文档, 这样 admin 可以有一套自身可独立运行的storybook, 也方便根据 admin 自身的需求做独立扩展 .
初步实现
- 建立一个 lerna 工程, 包含 admin-ui && admin-story
- admin-ui 为组件库工程, packages下管理vue组件, 最后将组件打包为lib下的 js 文件输出.
- admin-story 是一个独立的 storybook 工程, 依赖于 admin-ui 组件库; 适配了
mdx编写方式, 也适配了klk-story的 md 的编写方式, 打包输出是 lib 文件夹, 包含了需要在klk-story的 story 文档
- 发布到
knpmdoc klk-story集成: npm 安装 @klk/admin-story, 在klk-story的stories目录下配置 admin 的 stories ; (admin-story每次更新版本之后, 需要部署klk-storybook以同步最新组件文档)
- 效果
补充
另外可能，组件在knpm发布初期本地调试可能会麻烦，这里可能用到类似npm-link之类的工具降低调试成本。