如何搭建一个内部组件共享平台

如今前端越来越趋于组件化的开发方式,最大的益处就是UI页面和逻辑的共用。

在开发者的眼里,如果你打开一个网站,组件化的开发方式会让你看起来像这个样子:

逻辑功能上我们会封装成一个库,然后NPM发布到公共仓库上,实现共享。而UI组件如果想共用的话,好像更多的还是内部从一个项目拷贝到另一个项目中。

由于每个产品,每个公司对于UI的要求各异,更多的是要实现内部团队的一个共享,所以如果想在公司内部搭建一个类似于NPM这样的一个平台显得尤为必要。

Bit就是这样一个组件收集共享的平台。


什么是Bit

Bit是一个开源的cli工具,用于跨项目和跨仓库的隔离组件之间进行协作。

使用Bit将离散的组件从设计库或者项目中分发到独立的可重用的包中,这样可以在跨项目中进行使用。

你可以使用自己的独立服务器来进行组件协作,也可以使用bit.dev云托管进行私有和公共组件的共享。

为什么选择Bit

Bit简化了UI组件上的协作过程。团队成员可以共享,维护和同步来自不同项目的隔离组件。

Bit能够让你的团队:

  • 提高代码可重用性

  • 提高设计和开发效率

  • 保持UI和UX的一致性

  • 增加项目的稳定性

主要的特点

  • 从现有的库或项目中提取要直接共享的组件。

  • 通过与项目的其余部分分开构建和测试每个组件,验证组件的独立性。

  • 从任何使用共享组件的应用程序中更改其源代码。

  • 在本地修改的基础上获取组件中已发布的更改。

  • 直接从使用应用程序中回馈对组件所做的更改。

  • 自动将每个组件包装为npm软件包。

  • 分发离散的组件,而不是单个大型的软件包。

  • 根据组件依赖性的变化自动进行组件版本控制。

  • 与领先的框架和工具一起使用:React,Vue,Angular,Mocha,Jest。

  • 与Git,NPM和Yarn一起使用。

Bit可以很好地与JavaScript和JavaScript框架协作


安装

使用npm

npm install bit-bin --global

或者使用yarn

yarn global add bit-bin  

Bit cli需要node 8.12及以上版本

使用bit.dev进行托管

将你的组件上传到一个共用的组件托管的服务器上实现共享

附:

详见官方文档:https://docs.bit.dev/docs/quick-start

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/354578.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

不要讨厌HATEOAS

或我如何学会不再担心和爱HATEOAS REST已成为实现Web服务的事实上的解决方案,至少已成为一种流行的解决方案。 这是可以理解的,因为REST在使用HTTP规范时提供了一定程度的自我文档。 它经久耐用,可扩展,并提供了其他一些理想的特…

前端如何进行日志驱动开发

日志在开发过程中的作用自不必说,一旦程序出现问题,我们首先想到的是通过日志监控去追查。 好的日志可以通过应用程序执行的历史记录模拟出用户在使用程序的时候操作的完整过程。 想知道发生了什么 为了便于我们分析程序哪里出现问题,我们…

消息钩子学习工程

前奏近来一直在自学Windows Hook相关的知识,已经尝试多种注入方式。尤其对消息钩子方式很感兴趣,因为看到Spy能够截获系统中绝大多数应用的消息流,就很想知道它的工作原理,打算制作属于自己的Spy。消息钩子简介:消息钩…

[Angular] 笔记 8:list/detail 页面以及@Input

1. list 页面 list/detail 是重要的 UI 设计模式。 vscode terminal 运行如下命令生成 detail 组件: PS D:\Angular\my-app> ng generate component pokemon-base/pokemon-detail --modulepokemon-base/pokemon-base.module.ts CREATE src/app/pokemon-base/p…

javaone_JavaOne 2012 – 2400小时! 一些建议

javaone您可能已经看到JavaOne 2012 Content Catalog在线。 计划委员会经过数周的紧张工作,对每个提案进行了分类,审查,评分和讨论,我们终于设法为您设置了(希望如此)有趣的组合。 整整105天或2400小时&…

推荐几个最近Star过的Github仓库

平时逛Github的时候,总是顺手对一些自己认为好的仓库给个 Star,一是对作者的鼓励,二来推荐给关注自己的人(首页动态可见)。 下面列举了一些我平时 Star 过的仓库,顺便也推荐给我的读者。 Front-End Checkli…

使用Gatling + Gradle + Jenkins Pipeline为您的JAX-RS(和JavaEE)应用程序进行连续压力测试...

在这篇文章中,我将解释如何使用Gatling项目为您的JAX-RS Java EE端点编写压力测试,以及如何将它们与Gradle和Jenkins Pipeline集成,因此,除了进行简单的压力测试外,您还可以使用以下方法: 连续的压力测试&a…

使用 VuePress 搭建一个自己的知识文档

最近准备对前端知识做一个梳理,将自己的平时遇到的问题和解决方案形成一个知识文档。本文记录了搭建 VuePress 的主要过程,同时也提供了部分自定义的配置,示例地址:http://doc.i-fanr.com 环境搭建 VuePress 有着比较完善的中文文…

金三银四跳槽面试季,我整理前端知识做了个网站

每年的金三银四,都将迎来求职面试的一个高峰期,为什么会有那么多的求职需求?多是因为以下几个来源:已拿 offer 等年终奖的:年前已经找到机会,领了年终奖辞职要到新公司报到的临时起意要辞及裸辞的&#xff…

hadoop的Map阶段的四大步骤

深入理解map的几个阶段是怎样执行的。转载于:https://www.cnblogs.com/xubiao/p/7846080.html

小程序 Typescript 最佳实践

小程序结合TypeScript开发,如果用第三方框架,首选Taro已完美支持。但是如果你选择原生开发,那么下面的这份实践可能会帮到你。小程序 Typescript 最佳实践使用 gulp 构建(支持 typescript 和 less/sass/scss)使用 type…

这款电脑升降桌美到我了

一直在寻觅一款集颜值与功能于一体的电脑升降桌,这款乐歌 E5 电动桌终于成功地满足了我的需求。有黑白两款颜色可选,但其中白色钢化玻璃版常适合用来作为白色系桌面的基础——四周圆角设计,再加上碳素钢的桌体框架,整体非常有质感…

分享一个引起极度舒适的工作桌面

干净整洁的桌面或许不能带给你工作效率的提升,但一定会给你带来愉悦的心情。长期码字一定需要一个升降桌,可自由地调节高度,以保证舒适的坐姿和灵活的视角。另外坐久了,累了还能站立工作一会儿。有了外显之后,如果不需…

canvas绘制多边形

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>canvas绘制多边形</title> </head> <body> <canvas id"canvas" style"border: 1px solid darkcyan;" width…

ehcache rmi_EhCache复制:RMI与JGroups

ehcache rmi最近&#xff0c;我正在研究一种需要复制缓存的产品。 缓存提供程序已经确定-EhCache&#xff0c;剩下的就是有关传输的问题。 哪一个是最佳选择&#xff1f; 这里的最佳选择是指性能更好的选择。 仅在两个可用传输之间进行了性能评估-JGroups和RMI&#xff0c;对其…

Element Table 可以实现哪些常见的有用的功能

最近项目中频繁使用 table 功能&#xff0c;因为 UI 框架使用的又是 Element UI&#xff0c;于是总结下在 Element 下 el-table 组件使用技巧。1.行背景色table 组件提供了 row-style 属性&#xff0c;说明&#xff1a;行的 style 的回调方法&#xff0c;也可以使用一个固定的 …

如果在这样的环境中写代码,会不会很高效

桌面环境分享系列又来了。我会把平时看到的好的桌面布置分享给大家&#xff0c;帮助大家在桌面整理和打造方面提供一些新的想法和创意。如何评价一个开发桌面的好坏&#xff0c;首先一定要清爽整洁&#xff0c;该有的家伙事儿一定要有。不是要看上去要有多高大上&#xff0c;重…

Vue 页面如何监听用户预览时间

最近的业务中涉及到这样一个需求&#xff0c;在线培训的系统需要知道用户对某个在线预览的页面追踪用户的预览时长。初步我们首先想到借助 Vue 页面的生命周期函数 mounted 和 destroyed&#xff0c;分别在其中加入开始计时和清除计时的逻辑&#xff0c;通过后台的接口上报对应…

一个追求高效的学习者手机里装有哪些APP?(转)

转载&#xff1a;http://www.jianshu.com/p/f568c8d8b6bb 1、录音软件-Recordium 参加活动&#xff0c;如果不想错过活动现场的经常片段&#xff0c;速记又来不及&#xff0c;那就选择录音吧。小六之前都使用录音笔&#xff0c;但是自从有了这个APP之后&#xff0c;在开会&…

spring social_Spring Social入门

spring social像我一样&#xff0c;无论是添加简单的Facebook“赞”按钮&#xff0c;一大堆“共享”按钮还是显示时间轴信息&#xff0c;您都不会注意到当前对应用程序“社交化”的热衷。 每个人都在做这件事&#xff0c;包括Spring的家伙&#xff0c;事实上&#xff0c;他们提…