组件复用一小步 轻松实现跨项目开发提效
关于这个话题,你基本上有两个选择。要么是使用像 React、Angular 或 Vue 这样的框架,好处是你可以享受成熟框架的所有现成结构和优势。要么还可以选择 Web 组件及其工具链(如 Stencil 等),好处是这些组件与框架无关,更容易在基于不同框架的项目中复用和利用组件。
你必须搞清楚哪种架构更适合你。为了避免每开发一个组件都放到一个单独的存储库中的开销,许多团队选择将多个组件分组到许多组件库中。
像 Bit 这样的工具可以使你完全隔离地开发、构建和测试库中的各个组件。使用 Bit 时,你可以将任何存储库(和库)中的每一个组件作为独立单元来跟踪,并自动将其与所有依赖项打包在一起。然后这些组件可以独立链接到一个编译器(需要零配置),然后就可以独立构建、测试和渲染。接下来你可以通过存储库对多个组件进行版本控制和发布。更新单个组件时,Bit“知道”其他哪些组件依赖于该组件,并帮助你更新受该组件更新影响的所有组件。它还提供了额外的,非常利于代码共享的“类 monorepo”功能,例如自动本地链接、多组件配置控制、子集和增量构建、循环依赖项处理、动态工作区和单个 NPM 安装,等等。
另一个选择是将所有项目重构为一个 monorepo,但这是一项巨大的工程,需要做的工作远不止共享代码而已。你还可以使用其他辅助工具(例如 Lerna)从存储库中对组件进行版本控制和发布,但是大多数工具都需要大量的重构和配置,并且无法控制组件的依赖关系图。
组件发布后工作还远没有结束。你必须确保人们可以在实际工作中找到、使用和更新这些组件。否则,你的所有这些心血就可能彻底白费了。大多数人不会费那么大的劲寻找你的组件,也不会使用需要修改时却没法调整的组件。只为了一个组件就得一头扎进整个库并更新它,会是非常繁琐笨拙的流程。
在 bit.dev 中创建组件门户
为了让大家都可以使用你的共享组件,并简化组件的发现和使用流程,你可以创建自己的组件门户,也可以使用基于云的门户(例如 bit.dev)。
查找你的团队共享出来的组件。 了解它们的 API 并运行实时渲染的示例。 获取单个组件以在不同项目中使用。 理想情况下,为每个组件运行构建和测试。
如果你决定自行构建也是可以的,只是可能要多花一些时间。如果你选择 bit.dev,则上述这些功能都是现成可用的,此外还有管理权限和控制工作流等功能。它将托管你的组件,运行其 CI,让你保存并运行渲染的代码示例,提取组件的 API 文档,然后使用 npm/yarn 安装它们。
bit.dev——查找、学习、尝试和安装组件
你可以利用 Bit 进行版本控制,并从存储库发布单个组件,甚至可以批量发布多个组件。
当你更改某个组件时,Bit 可以让你在存储库中只更新这个组件本身以及依赖它的其他组件,这样你就不用处理整个库了。这样一来,这些组件的使用者就可以仅针对其安装的组件(及其依赖组件)获取更新,而不必为整个库引入多余的更新。
当你将组件发布到 bit.dev 时,你不仅可以将它们安装为软件包,还可以做更多事情。你可以将组件的实际源代码 bit import 到正在使用的任何存储库中。无需上下文切换,你也不必回到发布库来建议你的更改。
该组件的“克隆”版本随附所有相关文件和依赖项,以及链接的编译器,并由 Bit 进行版本控制和管理。于是你可以只编辑代码并单独运行构建和测试。
当你对结果感到满意时,只需 bit tag 一个新版本,然后将其导出回 bit.dev。接下来这些更改就可以更新到其他任何项目中,包括原始的发布库上,可以使用存储库中的 Git 合并更改,这样就可以轻松地在所有位置同步组件更改。
在构建和共享组件时,实际上你是在构建一个 UI 组件设计系统。这个系统可以标准化你的开发工作,并为你的应用程序用户塑造一致且舒适的视觉和功能体验。
你要构建的不只是一个库,而是在组织内部创建一个富有生命力的组件生态系统。你将获得的不只是一个静态的文档站点,而是一个带有可视化渲染组件的组件中心,其中所有人都可以轻松找到、查看并使用你构建的组件。
UI 组件设计系统:构建、分发、应用
通过 bit.dev,你可以渲染和可视化实际的代码组件(React、Vue 和 Angular),帮助开发人员和设计人员准确了解他们的组件对用户展示的外观、行为和体验。他们甚至可以随时在可编辑的演示台上运行这些组件。
在这里,开发人员可以轻松找到并安装所需的组件,他们和设计人员还可以看到组件的可视化效果。当开发人员作出更改并更新特定组件的版本时,设计人员可以立即查看新版本并监视更改,以确保生成的组件适合他们的设计系统。
开发人员可以根据需要灵活地对组件作出更改,并通过自己的项目提交更新建议,同时设计人员可以随时加入协作以审查更改,这就形成了良好的平衡。
使用 Bit 时,你可以在库中单独构建、打包和发布组件。然后你可以将它们导出到 bit.dev,从而打造一套由实际的源代码组件组成的可视化设计系统。
模块化组件开发:将组件及其所有依赖项自动封装在存储库中,然后链接一个带有零配置的编译器,你就可以轻松地在仓库中构建、测试和更新组件及其依赖项,同时不影响其他部分。接着你可以批量发布组件,每个组件都发布为独立的包。 简化组件的发现和使用过程:将组件整合到一个门户中,方便大家发现和使用它们。跨项目轻松更新和控制更改。 改善组件的使用率和协作环境:让你自己和团队的伙伴们直接在自己的项目中对组件提出更改建议,无需上下文切换即可在复杂的库中作出 PR。提高组件的采用率和使用率,减少复制粘贴,改善 UI 标准化及跨应用程序和屏幕的一致性。
在多个项目和存储库之间复用组件,可以在项目和团队成员之间创建高效的组件经济环境。无论你在使用库,还是要直接在项目之间共享组件,有三条原则是不变的:将组件开发为可复用单元;分发它们以便大家查找和使用;让自己和其他人采用这些组件并协同作出更改。
请随时查看 Bit 的 GitHub 链接,欢迎提出任何问题、评论或反馈。祝大家组件开发工作顺利!🐥
Bit:https://github.com/teambit/bit
英文原文:https://itnext.io/how-to-easily-reuse-components-across-projects-and-repositories-fa73f8ba2a83
- Go/Python/Erlang编程语言对比分析及示例 基于RabbitMQ.Client组件实现RabbitMQ可复用的 ConnectionPool(连接池) 封装一个基于NLog+NLog.Mongo的日志记录工具类LogUtil 分享基于MemoryCache(内存缓存)的缓存工具类,C# B/S 、C/S项目均可以使用!
- XNA游戏开发之(五)——XNA实现组件复用
- XNA游戏开发之(五)——XNA实现组件复用
- Android Camera开发详解 一 实现一个可复用的相机组件
- 项目开发技巧(四):使用JspSmartupload实现文件上传下载(一):JspSmart之upload组件源码及使用
- vue2开发之实现可复用的轮播图carousel组件
- [ASP开发]在Web项目中多维下拉菜单的实现技巧和方法
- 实现图形JSF组件很简单地构建一个纯HTML无法轻松实现的图形Web应用程序组件
- VC项目开发之单文档多视图实现
- 用Delphi为Asp开发文件上载组件的原理和具体实现过程
- WINCE应用的UI实现方案 —— 下篇:代码一小步,项目进度管理一大步
- Delphi组件开发教程指南(6)实现一个模拟动画显示控件
- VC项目开发之单文档多视图实现
- 如何利用FDD模式实现项目的精确、快速开发
- 应用DNS、IIS实现Web项目团队协作开发
- FleaPHP 开发指南 - 8. 如何使用 RBAC 组件实现访问控制
- 中国特色管理类软件项目开发之通用权限必杀技 -- 权限自由配置设定、实现智能化自动检测校验
- SharpStreaming项目开发纪实:构建基本的服务器及客户端应用(七)——服务器界面实现
- 开源项目 开发心得 (2) 之 Mail Monitor(邮件监测器) Part II.(技术是怎样实现的)
- struts2+hibernate3+spring3项目快速开发(图文)之3:搭建项目结构(分包、类实现、方法编写)