文章目录Pinterest GestaltPinterest 的设计系统1、这个项目能做什么2、项目结构3、安装和使用4、开发工具5、谁适合用 GestaltPinterest GestaltPinterest 的设计系统Gestalt 是目前 Pinterest 内部使用的设计系统在开源社区已有超过四千颗星。它既包含 React 组件库也覆盖了配套的设计指南、最佳实践和开发工具目标是为工程和设计团队提供统一的产品构建方式。1、这个项目能做什么Gestalt 的核心是一个 React 组件库。你常用的按钮、文本、图标、表单控件、弹窗等基础组件基本都有现成的。组件都作为 ES6 模块导出项目还自带一个预编译的 CSS 文件直接引入就能用。项目同时把设计规范也一起开源了。组件怎么用、什么场景适合什么组件、交互上有什么注意事项官方文档里都有说明。对前端开发者来说不用再到处翻设计稿的说明对设计师来说最终落地效果更可控。2、项目结构Gestalt 是一个 Monorepo用 Yarn Workspaces 管理。文档、组件、日期选择器、图表等都被拆成了独立的包各自维护但共享同样的构建和测试工具链。这种结构的优势是每个包的依赖关系清晰改了某个组件不会牵动整个库。代价是要跑完整功能之前需要装一下依赖但官方 yarn 和 yarn test 两条命令就能搞定不算复杂。3、安装和使用通过 npm 安装npmi gestalt--savenpmi gestalt-charts--savenpmi gestalt-datepicker--save或者用 yarnyarnaddgestaltyarnaddgestalt-chartsyarnaddgestalt-datepicker引入组件时需要同时加载组件和样式文件import{Text}fromgestalt;importgestalt/dist/gestalt.css;importgestalt/dist/gestalt-datepicker.css;Gestalt 官方维护 TypeScript 类型定义TypeScript 项目可以直接使用。4、开发工具项目自带 codemod每次发布可能有破坏性变更时官方会提供代码自动迁移脚本。用法是把 Gestalt clone 下来之后在你自己项目的目录里跑对应的 codemod指定解析器和要转换的文件即可。dry run 模式可以先看改动不会直接改文件。每次向 master 合入代码都会触发一次发布。PR 标题需要按组件命名例如 Avatar: Add outline prop。提交类型决定了版本 bump 的级别文档修正走 patch新增组件或属性走 minor不兼容变更走 major。5、谁适合用 Gestalt在做 React 项目并且希望界面风格统一的中大型团队会从这个设计系统里获益最多。现成的组件减少了重复开发配套的设计文档减少了设计师和开发之间的沟通成本。如果你正在从零搭建产品或者重构现有系统也可以参考 Gestalt 的组件划分方式和文档组织方式即使不用它的代码这套体系本身也值得一看。补充一点项目对社区贡献者的支持资源有限。Pinterest 的工程师团队主要面向内部需求迭代外部 issues 和功能请求不一定能及时响应。遇到问题时优先看 FAQ 和邮件频道通常比提 issue 更快。求迭代外部 issues 和功能请求不一定能及时响应。遇到问题时优先看 FAQ 和邮件频道通常比提 issue 更快。