如何用模块化方案组织一个可扩展的前端组件库项目

组件应按业务功能域而非 UI 类型拆分，如电商场景用 ProductCard、CartBadge、CheckoutStep；需严格隔离模块边界、精确控制导出、采用 CSS-in-JS 或 CSS Modules 实现样式隔离，并确保类型定义随组件发布且无交叉引用。组件按功能域拆分，而不是按 UI 类型很多人一上来就建 Button、Input、Modal 这类目录，结果半年后发现所有组件都依赖同一套主题逻辑，改个颜色要全局 grep 十次。真正可扩展的模块化，是从业务语义出发切分------比如电商场景下，ProductCard、CartBadge、CheckoutStep 才是自然边界。实操建议：立即学习"前端免费学习笔记（深入）"；每个模块目录包含自己的 index.ts（导出公共 API）、types.ts（仅本模块用的类型）、hooks/（非通用逻辑不抽到 shared）禁止跨模块直接 import 组件实现文件，只允许 import 对方的 index.ts 导出项共用工具函数必须进 shared/utils，且要带单元测试，否则很快变成"谁都改、谁都不敢删"的黑盒构建时按需导出，别让 tree-shaking 失效写 export * from './Button' 看起来干净，但 Webpack/Vite 会把整个 Button 目录所有依赖（包括图标、动效、polyfill）全打进 bundle。用户只用一个 PrimaryButton，却要下载整套按钮体系。实操建议：立即学习"前端免费学习笔记（深入）"；每个组件模块的 index.ts 只导出明确对外暴露的组件和类型，禁用 export *使用 package.json 的 exports 字段精确控制入口，例如："exports": { ".": "./dist/index.js", "./button": "./dist/button/index.js", "./button/primary": "./dist/button/primary.js"}在 tsconfig.json 中设 "declaration": true，否则下游项目无法正确推导类型，导致不得不 any 掉主题与样式隔离必须靠 CSS-in-JS 或 CSS Modules纯 CSS 文件 + BEM 命名？上线后就会发现：设计改个圆角，你得改 17 个组件的 scss 文件；换套暗色主题，得手动维护两套 class 名映射表。CSS-in-JS（如 @emotion/styled）或 CSS Modules 才能保证样式作用域和变量注入可控。 Fotor AI Image Generator Fotor 平台的 AI 图片生成器