组件应按业务功能域而非 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 图片生成器
如何用模块化方案组织一个可扩展的前端组件库项目
发布时间：2026/7/30 20:29:02
组件应按业务功能域而非 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 图片生成器
