当前位置: 首页 > news >正文

微前端技术预研 - bit初体验

1.关于什么是微前端以及微前端的发展, 当前主流框架以及实现技术等,可参考这篇总结(非常全面),

微前端总结:目录详见下图

本文内容主要针对bit框架的实时思路以及具体使用。

1.什么是Bit?

Bit 是可组合软件的构建系统。它使得由独立版本化组件组成的应用程序无缝且快速。核心思想是Component-driven(组件驱动开发)。

Component-driven development(组件驱动开发)是一种软件开发方法论,特别适用于现代前端开发领域,尤其是基于组件化框架(如React、Vue.js、Angular等)构建用户界面的应用程序。这一理念的核心思想是将UI设计和开发过程分解成一系列可重用的独立组件,并围绕这些组件进行迭代开发与测试。

它主要解决了以下问题:

  • 组件化管理:Bit 允许开发者在项目内部或者跨项目地发现、追踪、分享和重用代码组件(如React组件、Vue组件、纯JavaScript函数、CSS模块等)。这意味着开发团队可以在不同的项目之间共享和维护独立的、可复用的代码片段。

  • 版本控制:每个组件都可以有自己的版本历史记录,就像Git对整个项目进行版本控制一样,Bit提供了对组件级别的版本控制能力。这意味着团队成员可以方便地回滚、升级或选择特定版本的组件。

  • 协作与集成:Bit可以帮助团队更好地协作,因为它简化了组件的发布和消费流程。团队成员可以创建自己的私有或公开的组件仓库,使得不同项目的开发人员能够轻松地查找和集成经过测试的组件。

  • 提高代码质量和效率:通过组件化开发和复用,可以减少代码重复,提高代码质量,加速开发速度,并降低维护成本

优点:

  • 统一组件标准:鼓励开发团队遵循统一的组件化开发规范。

  • 高效协同:促进团队间的组件共享和重用,提升整体开发效率。

  • 隔离更新:单独更新和发布组件,不影响项目中其他组件的稳定性。

  • 透明追溯:组件版本信息清晰,便于追踪和审计代码变更历史。

  • 跨项目复用:组件可以在不同项目、甚至不同技术栈之间轻松迁移和使用。

编辑器配置:vscode 安装 Bit Visual Studio Code extension,如果您使用的是Webstorm请参考官网 IDE配置

bit: 使用步骤

一: 环境搭建

  • 安装bit
npx @teambit/bvm install
  • 初始化工作空间

  1. 已有组织和项目则直接执行如下命令初始化

bit init --default-scope my-org.my-project

 2.如果您是第一次使用, 请先登录bit平台新建组织和项目:  在 bit平台中根据引导创建组织和组件,会生成如下创建步骤, 只需按步骤执行即可, 这里默认创建的是node环境项目

  •  安装组件开发环境初始化(以vue项目为例)
// 创建一个包含自定义Vue 环境的新工作区
bit new vue my-workspace --env bitdev.vue/vue-env --default-scope my-org.my-scope// 现有工作空间中创建自定义Vue环境:
bit create vue-env envs/my-vue-env --aspect bitdev.vue/vue-env

执行命名安装丢失的依赖

bit install --add-missing-deps

生成的env目录结构如下:

  • 环境设置完成, 开始创建应用(以vue应用为例)

执行命令查看支持的模版

bit templates

执行命令创建vue应用

bit create vue-app my-app

创建的vue-app目录结构如下

二: 创建一个UI组件

  •    执行命令创建一个vue登录组件
bit create vue login

生成组件目录如下:

  • 在应用中使用Login组件
<script setup lang="ts">
import Login from '@my-org/my-scope.login';
import { ref } from "vue";const count = ref(0);
</script><template><button @click="count++">App: {{ count }}</button><Login title="my-test-login"></Login>
</template><style scoped>
button {color: blue;
}
</style>

运行

bit start
  • 导出组件到远程

登录

bit login

检查您的工作空间状态以查看哪些捕捉已准备好导出:

bit status

捕获最新的组件更改

bit snap apps/to-do --message "initial snap"

打标签

bit tag --snapped

导出暂存组件

bit export

三: 创建一个APP

执行命令创建一个vue-app

bit create vue-app my-vue-app

四: 使用远程组件

  • 新项目使用远程组件

执行命令,初始化bit工作

bit init

远程组件使用方式,官方提供了3种,可根据自己实际需求选择:

  将组件添加为依赖项bit install @ym-demo/demoapp.button将组件导入到工作区bit import ym-demo.demoapp/buttonFork 组件到工作区bit fork ym-demo.demoapp/button

使用方式二导入工作区:workspace.jsonc里面配置远程导入组件的路径"defaultDirectory": "bit-components",

执行命令后,项目文件下会生成对应目录

五:已有项目中使用bit

可参考官方教程   , 或以下步骤

以追踪发布已有项目的product-list组件为例, 详细步骤如下:

  bit init // 初始化bit环境bit add ./src/components/product-list //  bit会跟踪组件对组件的依赖进行分析, 将会创建一个和文件名一样的组件(product-list为文件夹名称)bit status // 查看组件状态bit compile // 编译组件bit install // 安装依赖bit build // 打包bit tag ym-demo.demoapp/product-list --ver 0.0.1 // 确认组件的版本bit export ym-demo.demoapp/product-list // 导出到远程

注意:ym-demo.demoapp为bit远程工作区, 如没有请参考目录一:环境搭建中的初始化工作空间章节

相关文章:

微前端技术预研 - bit初体验

1.关于什么是微前端以及微前端的发展&#xff0c; 当前主流框架以及实现技术等&#xff0c;可参考这篇总结(非常全面)&#xff0c; 微前端总结&#xff1a;目录详见下图 本文内容主要针对bit框架的实时思路以及具体使用。 1.什么是Bit? &#xfeff;Bit 是可组合软件的构建…...

对象关系映射---ORM

一、什么是ORM&#xff1f; ORM&#xff08;Object Relational Mapping&#xff09;&#xff0c;即对象关系映射&#xff0c;是一种程序设计技术&#xff0c;用于在面向对象编程语言中实现对象和关系型数据库之间的映射。 二、ORM是干什么的&#xff1f; ORM 的主要目的是简…...

Django REST Framework(十七)Authentication

1.认证Authentication 在 Django REST framework (DRF) 中&#xff0c;可以在配置文件中配置全局默认的认证方案。常见的认证方式包括 cookie、session、和 token。DRF 提供了灵活的认证机制&#xff0c;可以在全局配置文件中设置默认认证方式&#xff0c;也可以在具体的视图类…...

FPGA开发——数码管的使用

一、概述 在我们的日常开发中&#xff0c;数字显示的领域中用得最多的就是数码管&#xff0c;这篇文章也是围绕数码管的静态显示和动态显示进行一个讲解。 1、理论 &#xff08;1&#xff09;数码管原理图 在对数码管进行相关控制时&#xff0c;其实就是对于8段发光二极管和…...

什么是网络安全等级保护测评服务?

等保测评 依据国家网络安全等级保护制度规定&#xff0c;按照有关管理规范和技术标准&#xff0c;对非涉及国家秘密的网络安全等级保护状况进行检测评估。定级协助 根据等级保护对象在国家安全、经济建设、社会生活中的重要程度&#xff0c;以及一旦遭到破坏、丧失功能或者数据…...

基于深度学习的多模态情感分析

基于深度学习的多模态情感分析是一个结合不同类型数据&#xff08;如文本、图像、音频等&#xff09;来检测和分析情感的领域。它利用深度学习技术来处理和融合多模态信息&#xff0c;从而提高情感分析的准确性和鲁棒性。以下是对这一领域的详细介绍&#xff1a; 1. **多模态情…...

Glove-词向量

文章目录 共现矩阵共线概率共线概率比词向量训练总结词向量存在的问题 上一篇文章词的向量化介绍了词的向量化&#xff0c;词向量的训练方式可以基于语言模型、基于窗口的CBOW和SKipGram的这几种方法。今天介绍的Glove也是一种训练词向量的一种方法&#xff0c;他是基于共现概率…...

Plugin ‘mysql_native_password‘ is not loaded`

Plugin mysql_native_password is not loaded mysql_native_password介绍1. 使用默认的认证插件2. 修改 my.cnf 或 my.ini 配置文件3. 加载插件&#xff08;如果确实没有加载&#xff09;4. 重新安装或检查 MySQL 版本 遇到错误 ERROR 1524 (HY000): Plugin mysql_native_passw…...

Hive数据类型

原生数据类型 准备数据 查看表信息 加载数据 查看数据 复杂数据类型-数组 准备数据 查看数据 ​优化 复杂数据类型-map 准备数据 查看数据 复杂数据类型-默认分隔符 准备数据 查看数据 原生数据类型 准备数据 -- 1 建库 drop database if exists db_1 cascade;…...

OSI七层网络模型:构建网络通信的基石

在计算机网络领域&#xff0c;OSI&#xff08;Open Systems Interconnection&#xff09;七层模型是理解网络通信过程的关键框架。该模型将网络通信过程细分为七个层次&#xff0c;每一层都有其特定的功能和职责&#xff0c;共同协作完成数据从发送端到接收端的传输。接下来&am…...

MSYS2下载安装和使用

Minimalist GNU&#xff08;POSIX&#xff09;system on Windows&#xff0c;Windows下的GNU环境。 目录 1. 安装 2. pacman命令 3. 配置vim 4. 一些使用示例 4.1 编译代码 4.2 SSH登录远程服务器 1. 安装 官网下载&#xff1a;https://www.msys2.org/ 双击.exe文件&am…...

机器学习中的决策树算法——从理论到实践完整指南

决策树在机器学习中的应用与原理 1. 介绍1.1 定义和基本概念1.2 决策树在机器学习中的角色和重要性 2. 决策树的结构2.1 节点、分支、叶子节点的定义和功能2.1.1 节点2.1.2 分支2.1.3 叶子节点 2.2 树的深度和宽度的影响2.2.1 树的深度2.2.2 树的宽度 3. 决策树的构建方法3.1 基…...

FFplay介绍及命令使用指南

&#x1f60e; 作者介绍&#xff1a;欢迎来到我的主页&#x1f448;&#xff0c;我是程序员行者孙&#xff0c;一个热爱分享技术的制能工人。计算机本硕&#xff0c;人工制能研究生。公众号&#xff1a;AI Sun&#xff08;领取大厂面经等资料&#xff09;&#xff0c;欢迎加我的…...

php实现动态登录

简介&#xff1a; 效果&#xff1a;通过前端页面的注册&#xff0c;通过MD5将密码加密&#xff0c;发送到数据库&#xff0c;通过验证数据库的内容实现登录&#xff0c;以及各种保证安全的措施 实验环境&#xff1a;phphtmlcssmysql数据表&#xff0c;使用html css设计注册&a…...

Servlet2-HTTP协议、HttpServletRequest类、HttpServletResponse类

目录 HTTP协议 什么是HTTP协议 HTTP协议的特点 请求的HTTP协议格式 GET请求 POST请求 常用的请求头说明 哪些是GET请求&#xff0c;哪些是POST请求 响应的HTTP协议格式 常见的响应码说明 MIME类型说明 HttpServletRequest类 作用 常用方法 如何获取请求参数 po…...

探索数据的内在世界:sklearn中分层特征聚类标签的可视化技术

探索数据的内在世界&#xff1a;sklearn中分层特征聚类标签的可视化技术 在机器学习中&#xff0c;聚类是一种探索数据结构的强大工具。对于具有分层特征的数据&#xff0c;如文本、时间序列或分类标签&#xff0c;聚类结果的可视化可以提供深入的洞见。本文将详细介绍如何在s…...

airtest定位方法

airtest定位方法 最近遇到一个比较新颖的airtest方法&#xff0c;分享给大家。一键三连&#xff1b; airtest是一款用于自动化测试的Python库&#xff0c;被广泛应用于移动应用和游戏的测试中。在进行自动化测试时&#xff0c;定位元素是非常重要的一步&#xff0c;因为只有准…...

排列组合 n*(n-1)*(n-m+1)

n*(n-1)*(n-m1)/m! --# 组合 n*(n-1)*(n-m1)/m! local function get_combinations(n,m) c 1 c0 1 for i 1,m do c c*(n-i1) c c/i end return math.floor(c) end print(get_combinations(10,6)) 打印出来为:210...

Python面试整理-数据处理和分析

在Python中,数据处理和分析是一项非常重要的应用,得益于丰富的第三方库和工具,Python已经成为数据科学家和分析师的首选语言之一。以下是进行数据处理和分析时常用的工具和方法: 1. 数据处理 a. Pandas ● 功能: Pandas 提供了强大的 DataFrame 结构,使得数据操作和预处理…...

职业教育计算机网络综合实验实训室建设应用案例

近年来&#xff0c;职业教育在培养技能型人才方面发挥着越来越重要的作用。然而&#xff0c;传统的计算机网络技术教学模式往往重理论、轻实践&#xff0c;导致学生缺乏实际操作能力和职业竞争力。为了改变这一现状&#xff0c;唯众结合职业教育特点&#xff0c;提出了“教、学…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...

Linux中《基础IO》详细介绍

目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改&#xff0c;实现简单cat命令 输出信息到显示器&#xff0c;你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...

轻量级Docker管理工具Docker Switchboard

简介 什么是 Docker Switchboard &#xff1f; Docker Switchboard 是一个轻量级的 Web 应用程序&#xff0c;用于管理 Docker 容器。它提供了一个干净、用户友好的界面来启动、停止和监控主机上运行的容器&#xff0c;使其成为本地开发、家庭实验室或小型服务器设置的理想选择…...

网页端 js 读取发票里的二维码信息(图片和PDF格式)

起因 为了实现在报销流程中&#xff0c;发票不能重用的限制&#xff0c;发票上传后&#xff0c;希望能读出发票号&#xff0c;并记录发票号已用&#xff0c;下次不再可用于报销。 基于上面的需求&#xff0c;研究了OCR 的方式和读PDF的方式&#xff0c;实际是可行的&#xff…...