@beisen/storybook

A tool for debug and publish UI components.

• About
• Getting Started
• Commands
  • storybook
  • publish
  • build
• Monorepo
• Dependencies
• Developers
• License

About

在前端开发领域，业务开发普遍组件化。这种模式下，对源码的维护就有很大的挑战。目前有两种维护方式 MONO 与 MULTI。在维护大量组件时，使用MONO既可以保证组件的独立性，又可以减少维护成本。

目前针对于MONO已经有了不少的管理工具，Lerna 是一个不错的管理工具。但，对于前端组件开发领域，Lerna的配置和使用有些繁琐，也不利于集成进自己 CI 任务中，为了在 开发 和 集成 时中更方便的管理组件 knight-shield 便由此产生

Getting Started

Installing

$ npm install @beisen/storybook-lib --save-dev

Usage

$ npx sbl storybook start # 组件调试

$ npx sbl publish npm # 发布组件

$ npx sbl build lib # 编译lib

Monorepo

使用 sbl storybook 功能可以很方便的调试组件。但，在某些场景下往往需要和项目中其他的代码进行联合调试。在这种场景下可以结合 yarn，使用其提供的 workspaces 功能

Project Structure

在 components/ 中的组件都是MONO的维护方式，是独立的模块。在复杂项目中可能会存在MONO中模块互相依赖的情况，使用yarn的 link: 协议创建依赖

{
  "dependencies": {
    "button": "link:../button"
  }
}

项目中的非MONO模块代码如需引用MONO中的模块，可直接使用 ./src/**/js 方式引用即可，如上图所示 pages 对 button-group 的引用

注意：整个项目是一个大版本，项目的维护者完全不要关心子模块的版本。因屏蔽子模块的版本号，减少了开始者在维护子模块互相依赖时更新版本号带来的成本

CI

对于项目开发来说，无论是MONO模块还是非MONO模块，只需要修改源代码即可。执行 git push 之后，在执行jenkins任务时，添加 npx sbl publish npm --independent --only-updated 实现增量发布MONO中的模块，子模块的版本使用的是项目的版本号

Dependencies

Storybook 和 Learn 已助实现了部分功能。基于Storybook之上封装了一系列配件和功能实现了调试功能。基于了Lerna的内部模块(@lerna/package, @lerna/package-graph, @lerna/output)实现了组件发布功能

Developers

License

MIT