速来报名!AICon北京站鸿蒙专场~ 了解详情
写点什么

Bit 支持 Angular 并发布公开测试版,对 Vue 的支持也即将面世

  • 2019-08-03
  • 本文字数:2315 字

    阅读完需:约 8 分钟

Bit支持Angular并发布公开测试版,对Vue的支持也即将面世

我们荣幸地宣布 Bit with Angular 8+已发布公开测试版。现在你可以用它在不同项目之间共享 Angular 组件了,整个团队也可以协作使用组件,从而更快地构建应用程序。


2018 年 Bit 诞生,为前端业界带来了一条共享和构建组件的新途径。Bit 的组件平台已帮助超过 5 万开发者和他们的团队共享组件并协同构建应用。


在此之前 Bit 主要支持的是 React。但我们几乎每天都能收到很多请求,希望我们更好地支持 Angular 和 Vue。今天 Bit with Angular 发布了公开测试版,支持 Vue 的版本也即将推出。下面来看看具体内容。


试用 Bit with Angular

上手教程

为了帮助大家更好地体验为 Angular 组件协作打造的 Bit 版本,我们准备了一个手把手教程,演示如何在两个项目之间共享组件。你还可以在自己的 bit.dev 收藏夹中找到你的组件。


只需安装 bit-cli 并注册 bit.dev 帐户就可以跟随教程学习了。

使用实时 Angular 组件

这项功能让你可以先预览组件的效果,再决定是否用在项目中。



bit.dev 为导出到网站上的组件提供了一个展示环境,帮助你预先体验找到的组件的实际效果,再决定是否用在自己的项目中。


我们为 bit.dev 展示环境加入了 Angular 组件支持。当你点进一个 Angular 组件页面时,Bit 将使用 angular-cli 生成一个 Angular 应用,并允许你将组件添加到这个应用中。你可以添加应用模块 typescript 文件以及 CSS 和 HTML 文件来使用组件。



找到了你喜欢的组件?那就安装到你的项目中吧。

寻找 Angular 组件


你可以在 bit.dev 上使用 Angular 组件搜索功能找出你的团队和社区共享的组件。组件从项目导出到 bit.dev 时会自动附加与上下文相关的标签。可以用新加入的 Angular 标签查找 Angular 组件。




按上下文、依赖项和包大小搜索组件


你可以使用 bit.dev 组件搜索过滤器按指定的依赖项或包大小精确定位,更快找到应用所需的组件。想要找到自己的组件吗?只要先导出到 bit.dev 就行了。

用 Angular 和 Bit 开发

Bit 组件的 Angular 编译器

每个 bit 组件都与一个编译器链接在一起。Bit 编译器负责编译或转换源代码,来构建可在另一个项目中运行的文件。


Bit 团队现在正式发布了Angular编译器。你可以将它应用到所有从 Angular 项目共享的组件上。


方法:我们采用了 Angular 团队的建议,使用ng-packagr作为 Bit 的 Angular 编译器的基础。Angular 核心团队使用了 ng-packagr 这个项目作为他们的包管理器。我们也效仿了这条途径。


我们的编译器会将 Angular typescript 编译为 AOT(预编译)代码。构建结果使用 Angular Package Format(APF)格式,可以顺利导入 Angular 项目。

Angular 模块就是 Bit 组件

在 Angular 应用程序中,@Component 就是最基本的构建块。除了组件以外,典型的项目还包括服务、指令和流水线等内容。要在项目中使用这些实体,必须先在 Angular 模块或 ngModule 中声明它们。


Angular CLI 可以简单地快速生成新模块和实体。Angular 提供了一套最佳方法指南,告诉开发者如何将应用程序分解为共享模块和功能模块。


在 Bit 中任何东西都可以是一个组件。单个服务、流水线或功能函数都可以作为 Bit 组件导出。但根据我们的经验,最合适的就是 ngModule == Bit 组件

Angular 核心库依赖项

Angular 项目将 Angular 库(@angular 命名空间下的库)作为依赖项。运行 Angular 时,要求这些依赖项只能在项目中的 node_modules 层次结构中安装一次。当你使用 angular-cli 生成 Angular 项目并定义多个库和应用程序时,CLI 将负责处理这部分工作。


当 Bit 从项目中收集一个组件所需的安装内容时,它会将 @angular 库作为必需的依赖项。从外部导入组件时,这可能会导致 Angular 运行时库多次安装,并弹出一些烦人的错误。


这很容易解决。你只要将 @angular 库也添加为项目中的 devDependencies 即可。你可能还想放宽一些版本限制。因此,如果你的项目使用 @angualr/core 8.1.1 或 @angualr/core~8.1.0,则 devDependencies 可以定义为 @angular/core ^8.0.0。这样一来你的组件就可以在与你使用的版本区别不大的项目上复用了。


当然最好让 Angular 库统一在一个版本上,但这一点大家都知道。可以参阅我们的Angular指南获取更多信息。

向 Bit 和 Angular 作贡献

虽然 Bit 现在已经支持 Angular 8+了,但你还可以在一些方面帮助我们改善 Angular with Bit 的体验。例如:

测试组件

Bit 将组件的所有文件和依赖项封装在一起,使开发者可以在本地或在云上独立运行和测试它们。在编写 Angular 应用程序时,测试一直是一大核心要素。但是现在还不能用 Bit 测试 Angular 组件。


我们任务列表中的一个关键项目就是构建 Angular Tester for Bit,以便开发者可以测试 Angular 组件。我们的目标是同时为 Karma 和 Jest 构建测试器,这样你就可以选择自己喜欢的测试器了。Bit编译器和测试器都是开源的,欢迎大家为这项工作做出贡献!

AngularJS 支持

Angularjs(也就是 Angular 1)是前端开发业界的革命性产品。它仍在广泛应用,但现在已处于 LTS(长期支持)状态。在 2018 年中期发布的 1.7 版本是 Anguarjs 的最后一个版本。因此我们不打算正式支持 Angularjs。但 Bit 是为所有 Javascript 代码打造的开放平台,因此如果你还想用 Angularjs,想要编写自己的编译器和测试器,那也完全没问题。

未来展望

今天我们首次为 Angular 提供了支持,对 Vue 的支持也即将面世,不久将发布公开测试版。


为了实现这一目标,我们逐渐开始引入组件封装等新技术,将可复用代码与可随处运行的标准单元打包在一起。组件封装功能将很快推出,我们会发布更多信息。


我们的计划还有很多,且听下回分解。我们希望你会喜欢这个新版本,欢迎大家踊跃反馈


英文原文:https://blog.bitsrc.io/announcing-bit-with-angular-public-beta-578cbb173690


2019-08-03 16:273915

评论

发布
暂无评论
发现更多内容

K8S集群中使用JDOS KMS服务对敏感数据安全加密 | 京东云技术团队

京东科技开发者

数据安全 数据加密 k8s集群 企业号 8 月 PK 榜 KMS

中国图数据库,领导者!

华为云开发者联盟

人工智能 华为云 科技 华为云开发者联盟 企业号 8 月 PK 榜

设计模式-适配器模式

java易二三

Java 程序员 计算机

How to choose WiFi moudle? QCA9880+QCA9882-802.11ac WiFi seamless connection-2.4G&5G

wifi6-yiyi

5G wifi 802.11ac 2.4g

微短剧赛道风口下的一站式点播解决方案

阿里云CloudImagine

云计算 视频云 微短剧

极狐GitLab 价值流管理之「总时间图」使用指南

极狐GitLab

DevOps gitlab 软件研发 价值流 时间图表

SpringBoot中如何对数据访问层进行单元测试?

java易二三

Java 数据库 编程 程序员 计算机

对线面试官 - MQ经典面试题之高可用性及幂等性

派大星

MQ Java 面试题

生成式AI革新传媒互联网行业

百度开发者中心

媒体 传媒 #人工智能 ChatGPT 文心一言

蓝易云:SEO优化对香港服务器的配置有什么要求?

百度搜索:蓝易云

云计算 Linux SEO 云服务器 ECS

【干货】华为云图数据库GES技术演进

华为云开发者联盟

人工智能 华为云 图数据库 华为云开发者联盟 企业号 8 月 PK 榜

蓝易云:如何在 Alpine Linux 上启用或禁用防火墙?

百度搜索:蓝易云

云计算 Linux 运维 iptables Alpine

开发一款同城线下陪玩约玩APP大家怎么看?线下陪玩APP的应用场景

山东布谷科技胡月

语音聊天源码 线下约玩APP开发 线下陪玩平台 社交约玩平台开发 约玩交友APP源码

阿里云机器学习PAI全新推出特征平台 (Feature Store),助力AI建模场景特征数据高效利用

阿里云大数据AI技术

月活近千万,连续365天无故障:货拉拉怎么做稳定性指标度量?

TakinTalks稳定性社区

Elasticsearch Mapping类型修改 | 京东云技术团队

京东科技开发者

数据库 elasticsearch 企业号 8 月 PK 榜 Mapping

浏览器缓存清理软件Cookie mac激活版

mac

Cookie 苹果mac Windows软件 隐私保护软件

再升级!PP-OCRv4多场景平均精度提升5%!

飞桨PaddlePaddle

人工智能 paddle OCR 百度飞桨

AI教学赋能计划(大模型特辑)2023秋季学期启动申请!

飞桨PaddlePaddle

人工智能 百度飞桨 高校 复合型人才 产教融合

生成式AI技术的应用与发展

百度开发者中心

自然语言处理 #人工智能 ChatGPT 文心一言

度加剪辑App的MMKV应用优化实践

百度Geek说

性能优化 移动开发 企业号 8 月 PK 榜 IO优化

快手Java一面11问(附参考答案)

JavaGuide

Java spring 面试 springboot Java web

写得了代码,焊得了板!嵌入式开发工程师必修之代码管理方案(中)

极狐GitLab

git gitlab conan Git-Repo 多仓管理

uniapp中解析markdown支持网页和小程序

南城FE

JavaScript 小程序 前端 markdown

制造执行系统(MES)在家具行业中的应用

万界星空科技

开源 MES系统 智能家居

Jvm专讲之内存结构

java易二三

Java 编程 程序员 JVM 计算机

为什么那么多人喜欢用云桌面

青椒云云电脑

桌面云 云桌面

生成式AI:引领未来文案创作新潮流

百度开发者中心

#人工智能 生成式AI 文心一言

【实践篇】DDD脚手架及编码规范 | 京东云技术团队

京东科技开发者

DDD 软件架构 脚手架 企业号 8 月 PK 榜 DDD脚手架

DR531|QCA9531 Wi-Fi routerboard 2X2 802.11n 2.4G MIMO

wallyslilly

如何给application.yml文件的敏感信息加密?

java易二三

Java 编程 程序员 计算机 科技

Bit支持Angular并发布公开测试版,对Vue的支持也即将面世_语言 & 开发_Saurabh Barot_InfoQ精选文章