如何打包使共享UI组件变得非常简单

组件重用的最佳实践

加载
多米尼克阮
@domyen

包装提供了一种统一的方式来包装笨重的对象. 巧克力棒的薄薄的塑料包装纸包裹着这道赏心悦目但又有点乱的美味. 它提供了一种方便、用户友好的分发方法.

在组件领域中,打包扮演着类似的角色. 当不同的UI组件具有统一的包装时,它们会变得更容易共享. 这样做的好处是双重的:在你的应用中,独立的组件可以毫不费力地使用.g., 安装datepicker)和组件库更持久的规模. 让十博体育备用网址看看为什么.

包管理

组件库可以包含跨越不同代码库的数百个UI组件. 因为库的目标是管理和共享组件,所以显然要从包管理器开始.

包管理器使安装过程自动化, 升级, 配置, 并以一致的方式删除应用中的代码.

作为JavaScript事实上的包管理器,NPM是组件的天然家园. 它负责发布、版本控制和依赖关系,所以你不必这么做. 实现可重用性的第一步是将UI组件作为NPM包分发. 那么,为什么人们还没有这样做呢?

打包可以简化UI组件的安装、改进和丢弃.

NPM不是那么容易…

为NPM打包一个组件涉及到将一个组件从应用程序移动到一个新的回购, 创建一个新的NPM包, 建立一个构建过程. 在两个应用程序中获得相同的菜单真的值得吗? 复制目录或者使用git子模块不是更容易吗?

这是 更简单的 复制目录和使用子模块,但有不同的缺点:

  • 复制粘贴目录 这使得从一个应用程序到另一个应用程序的组件的改进非常困难. 在缺乏清晰的真相来源的情况下,组件很快就会过时.
  • 很难进行版本控制并且不跟踪依赖关系. 如果您有一个可重用的组件,比如 CreditCardForm 这依赖于子组件 CardInputDatePicker,没有简单的方法来判断这些子组件是否已被更新.

这些缺点排除了子模块和复制目录作为长期组件重用和库构建的可行策略.

如何处理组件包装

尽管NPM是最接近可重用性的十博体育备用网址,但它的工作流程过于繁琐. 这些开箱即用的特性太广泛了,不适合UI组件库的特定用例. 然而,优秀的开源十博体育备用网址可以让在NPM上打包UI组件变得轻而易举.

  • 在一个app repo中管理你的UI组件 : Lerna 优化包含多个包的mono-repos的包管理工作流程. 虽然是为像Babel和Meteor这样的图书馆建的, 同样的工作流程也适用于包含大量组件的应用程序代码库. 它可以让你避开从你的应用中提取UI组件包到新的repos的繁琐任务,以便在NPM上分发.
  • 精确的地方: 跟踪哪些应用程序使用哪些组件,以便开发人员识别 使 什么在哪里. 电极的探险家 by @WalmartLabs 是一个好的开始.
  • 安排更新: 更新是一部分通知(需要更新的内容)和一部分集成(更新是否破坏我的应用). 为了自动共享UI更改, 视觉 集成测试是必要的. 视觉快照测试 这一步是正确的吗.

这篇文章对你有帮助吗?

通过电子邮件向您发送免费的UI开发指南和教程.

4,410名开发人员,而且还在增加

十博体育备用网址正在招聘!

加入Storybook和colorless背后的团队. 构建被成千上万的开发人员在生产中使用的工具. Remote-first.

视图的工作

受欢迎的文章

董事会内部

一个高调的风投公司的幕后故事
加载
Zoltan Olah
通过彩色
为专业UI开发人员提供的深入指南和教程,来自Storybook团队
指南
介绍故事书为开发人员设计系统视觉测试手册
关于
订阅
加入墨水通讯,以获得免费的教程,指南,和资源的电子邮件给你.
友情链接: 1 2 3 4 5 6 7 8 9 10