抽取组件库与共享配置

本阶段目标

只抽取已经在应用中稳定复用的能力，建立一个消费者视角可验证的共享包。组件库不是把 components/ 移到新目录，而是开始维护公共契约和兼容性承诺。

选择抽取对象

从 frontend-lab 选择：

• 一个具有加载、错误、禁用和空状态的按钮或表单组件
• 一组颜色、间距和字体语义 Token
• ESLint 或 TypeScript 共享配置
• 一个与框架无关的纯函数工具包

不要抽取仍频繁变化的业务组件。重复两次不一定意味着抽象，稳定的语义和独立演进需求更重要。

定义公共契约

组件需要说明：

• Props、事件、插槽和默认行为
• 受控与非受控状态来源
• 键盘、焦点和可访问名称
• 样式覆盖、主题和 Design Token 边界
• 浏览器、Vue 和 TypeScript 兼容范围

包需要正确声明 exports、类型、样式、副作用和 peer dependencies。是否输出 CommonJS 应由消费者环境决定，不应默认把双产物当成完成标志。

用消费者测试

除包内单元测试外，创建一个最小消费应用，使用最终发布入口安装打包后的 tarball。这样才能发现源码别名掩盖的入口、类型、样式和依赖声明问题。

故障演练

1. 漏掉样式副作用声明，验证 Tree Shaking 后组件样式是否消失。
2. 把 Vue 放入普通 dependencies，检查消费应用是否出现多个框架实例。
3. 删除一个公共属性，演练废弃提示、迁移说明和主版本升级。

验收标准

• 组件文档覆盖正常、加载、错误、禁用和空状态
• 键盘操作与自动化无障碍检查通过
• 消费应用通过发布入口完成类型检查和生产构建
• 包不重复打包宿主应提供的框架依赖
• 破坏性变更有版本策略、迁移说明和退出周期

下一篇：演进为 Monorepo。