组件库构建需要考虑哪些工程问题？
简化版
组件库构建要考虑模块格式、类型声明、样式产物、按需加载、Tree Shaking、主题定制、外部依赖、文档示例和发布验证。它和业务应用不同，重点不是直接部署，而是让不同项目稳定、低成本地消费。
详细版
组件库构建常见关注点：
- 输出 ESM/CJS 和类型声明。
- 支持按组件导入和全量导入。
- 样式可独立引入或随组件引入。
- peerDependencies 外置 React/Vue 等框架。
- 正确声明 sideEffects，避免样式被误删。
- 产出文档站和示例。
- 发布前测试真实安装后的包。
面试回答要体现“库是公共契约”：API、样式、类型、版本和兼容性都要稳定。
完整版教学
一、组件库不是一个普通业务页面
业务页面只要构建后能在线上运行即可。组件库要被多个项目安装，每个项目的构建工具、框架版本、样式方案和 TypeScript 配置都可能不同。因此组件库构建的核心是“可消费性”和“稳定契约”。
如果组件库只在源码仓库里跑得通，发布到 npm 后类型缺失、样式不生效、按需加载失败，那对业务团队就是事故。
组件库源码
→ 构建产物
→ npm 发布
→ 多个业务项目消费
→ 反馈兼容性和体积问题二、模块格式和入口要清晰
组件库通常至少要提供 ESM 和类型声明，是否提供 CJS 看目标生态。入口要支持全量导入和按组件子路径导入。例如 import { Button } from '@ui/core' 和 import Button from '@ui/core/button'。
入口越多，维护成本越高。每个入口都要有 JS、类型、样式和文档对应。如果子路径导出配置错，用户会遇到运行成功但类型报错，或本地成功但打包失败。
| 能力 | 目的 | 常见风险 |
|---|---|---|
| ESM | 现代构建和 Tree Shaking | sideEffects 配错 |
| d.ts | 类型提示 | 路径不一致 |
| 子路径导出 | 按需加载 | exports 漏配 |
| CJS | 兼容旧环境 | 双包陷阱 |
三、样式构建要和按需加载配合
组件库样式有多种模式：全量 CSS、每组件 CSS、CSS-in-JS、预处理器源码、设计令牌变量。关键是用户引入 Button 时，Button 的样式也能以可控方式生效，同时未使用组件样式不要全量打进包。
例如 100 个组件全量样式 200KB，用户只用 5 个组件。如果只能引入全量 CSS，样式成本就很高；若支持每组件样式，可能只需要 20KB。但每组件样式会增加构建配置和文档复杂度。
import { Button } from '@ui/core'
import '@ui/core/button/style.css'四、外部依赖要避免重复打包
如果组件库基于 React 或 Vue，通常应把框架声明为 peerDependencies，并在打包时 external 掉。否则业务项目可能打进两份 React/Vue，造成体积变大甚至运行异常。
数字例子：React 本身几十 KB gzip，如果组件库和业务各打进一份，不只是浪费体积，还可能出现 hooks 上下文不一致。组件库作者要把宿主框架交给业务应用提供。
五、Tree Shaking 和 sideEffects 要小心
组件库希望未使用组件能被删除，但 CSS 引入属于副作用。如果 sideEffects: false 写得太粗，构建工具可能把样式 import 当作无副作用删除，导致组件无样式。常见做法是保留 CSS 副作用声明。
{
"sideEffects": [
"**/*.css",
"**/*.scss"
]
}这类配置看似小，实际非常关键。很多“组件库本地好好的，业务项目没样式”的问题都和 sideEffects 有关。
六、发布前要用真实项目验证
组件库应有 playground、文档站和消费测试。发布前用打包后的 tarball 安装到示例项目，验证类型、样式、按需加载、主题切换和 SSR 兼容。不要只跑单元测试。
记忆钩子：组件库构建不是把源码压成 dist，而是把 API、类型、样式和依赖边界打包成可信合同。
七、常见误区与追问
- 误区：组件库只要能 npm publish 就完成。 还要验证类型、样式、入口、按需加载和兼容性。
- 误区：把 React/Vue 打进组件库更省事。 应作为 peerDependencies，避免重复实例和体积浪费。
- 误区：sideEffects 统一设 false 最利于优化。 可能导致 CSS 被误删，应保留样式副作用。
- 追问：如何支持按需加载？ 提供 ESM、子路径导出、样式拆分，并确保 bundler 可 Tree Shake。
- 追问：主题定制怎么做？ 可用 CSS 变量、设计令牌、预处理器变量或运行时主题类。
- 追问：发布前怎么验证？ 构建后用真实示例项目安装 dist/tarball，跑类型检查、构建和页面测试。
八、加强记忆
组件库构建用“入口、类型、样式、依赖、验证”五个词记。入口让用户能导入，类型让 TS 能识别，样式要能按需且不被误删，框架依赖要 external，发布前必须用真实消费项目验一遍。它的目标是让别人用得稳，而不是自己仓库跑得爽。