storybookjs/storybook
6 articles
前置知识
- ›Web 开发基础知识（HTML、CSS、JavaScript）
- ›对 Node.js 和 npm/yarn 有基本了解
- ›熟悉 monorepo 的概念
- ›了解 iframe 及跨帧通信机制
01
Storybook 的架构：由 Channel 连接的三世界体系
Storybook 如何以 Server、Manager 和 Preview 三个独立环境运行，并通过 40 个子路径导出统一为单一包。
02
预设系统：Storybook 如何从多个来源组合配置
深入解析 Storybook 的预设架构——这条可组合的 reduce 链，将默认配置、框架、构建器、插件和用户覆盖项逐一合并。
03
Channel 与事件：贯穿 Storybook 的通信协议
深入解析 Storybook 的三个运行环境如何通过 Channel 抽象层进行通信——涵盖 100 余种事件、PostMessage 与 WebSocket 传输机制，以及用于状态同步的 Universal Store。
04
Preview 渲染管线：从 CSF 文件到渲染完成的 Story
深入剖析 Preview 完整渲染管线：虚拟模块引导、StoryStore 处理、配置合并、StoryRender 生命周期各渲染阶段，以及框架渲染器的集成方式。
05
Manager UI：模块化状态管理与 Addon 集成
深入解析 Storybook Manager UI 如何将 14 个状态模块组合成统一的 Store、将 addon 注册到类型化插槽，以及如何通过 refs 实现 Storybook 组合。
06
构建系统、测试与开发者工作流
Storybook 中由 Nx 编排的 monorepo 构建流水线、story 索引生成、变更检测、沙箱测试系统以及结构化错误处理机制。