写点什么

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:273910

评论

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

智联招聘×Milvus:向量召回技术提升招聘匹配效率

Zilliz

人工智能 AI Milvus Zilliz 向量数据库

荣耀 MagicOS 9.0 发布会及开发者大会,现正直播中

荣耀开发者服务平台

人工智能 AI 开发者大会 荣耀

IEPL专线:企业网络的高速保障

Ogcloud

企业组网 企业网络 IEPL 企业网络专线 网络专线

天润融通引领知识库革命,大模型技术实现自动知识采集

天润融通

人工智能

京东商品详情API全攻略:返回值字段一网打尽

技术冰糖葫芦

API 接口 API 文档 API 测试

鸿蒙网络编程系列29-RCP下载到文件和流示例

长弓三石

DevEco Studio 开发实例 HarmonyOS NEXT 网络与连接

天润融通知识库赋能一线客户运营,不是宝妈也可以成为育儿专家

天润融通

天润融通大模型文本机器人,让客服迈入“无人化”的第一步

天润融通

鸿蒙网络编程系列32-基于拦截器的性能监控示例

长弓三石

DevEco Studio 开发实例 HarmonyOS NEXT 网络与连接

k8s 中的 Gateway API 的背景和简介【k8s 系列之四】

快乐非自愿限量之名

Kubernetes 容器

最新测评,6款好用的在线代码编辑器推荐

Tp_jh

云计算 云原生 高效工具 云 IDE 敏捷开发工具

要低代码,但不要低能力,低代码产品能否成为企业的增效神器?

优秀

低代码 低代码平台 低代码平台比较

鸿蒙网络编程系列30-断点续传下载文件示例

长弓三石

DevEco Studio 开发实例 HarmonyOS NEXT 网络与连接

百度智能云千帆 AppBuilder 大模型应用开发解读

Baidu AICLOUD

应用开发 AI原生应用 大模型应用

去中心化衍生品入门:模型、挑战与机遇

区块链软件开发推广运营

交易所开发 dapp开发 链游开发 钱包开发 代币开发

淘宝详情API接口有什么应用?

科普小能手

API 接口 API 测试 淘宝API接口

BOE(京东方)携手雷神联合发布全球首款仿生蜂鸟屏 以全新升级ACR技术引领显示产业高端化的升维发展

科技汇

鸿蒙网络编程系列28-服务端证书锁定防范中间人攻击示例

长弓三石

DevEco Studio 开发实例 HarmonyOS NEXT 网络与连接

鸿蒙网络编程系列33-TLS回声服务器示例

长弓三石

DevEco Studio 开发实例 HarmonyOS NEXT 网络与连接

C#线性查找算法

EquatorCoco

C# 算法

数据结构 - 树,三探之代码实现

EquatorCoco

Java 数据结构

阿里大牛纯手打“亿级高并发系统设计手册”(限时开源)

架构师之道

高并发 java面试

鸿蒙网络编程系列31-使用RCP调用OpenAI接口实现智能助手

长弓三石

DevEco Studio 开发实例 HarmonyOS NEXT 网络与连接

【FAQ】HarmonyOS SDK 闭源开放能力 —IAP Kit(3)

HarmonyOS SDK

HarmonyOS

修复一个kubernetes集群

不在线第一只蜗牛

Kubernetes 容器 云原生

天润融通推出智能语音导航,自动识别客户意图实现高效分流

天润融通

2024最新1200道互联网大厂Java面试题附答案详解

采菊东篱下

编程 java面试

2025北京国际自动驾驶技术展览会

AIOTE智博会

自动驾驶展 自动驾驶展会

智能合约开发中的LP分红系统

区块链软件开发推广运营

交易所开发 dapp开发 链游开发 NFT开发 代币开发

单月30k+ Downloads!一款头部Embedding开源模型

合合技术团队

开源 工具 科技

科技是把双刃剑,巧用技术改变财务预测

智达方通

企业管理 数字化 科技 全面预算管理

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