共享可重复使用的角度组件

在构建Angular应用程序时，您可以通过共享的可重用Angular组件来组成应用程序的UI。

这些组件可以在不同的项目和应用程序之间重复使用，因此您不必每次都重新发明轮子。 通过单独共享，版本控制和更新这些组件，可以加快Angular开发速度， 并使用户界面保持一致 。

2018年，为JavaScript项目引入了位，主要由React社区采用。 在2019年， 在Bit和Angular团队之间进行协作之后 ，Bit的组件工作流程可用于在项目和团队之间共享可重复使用的Angular 8+组件。

在本文中，我们将看到如何利用开源项目Bit从Angular应用程序或库中快速隔离，版本化和共享重用组件，并在不同项目中使用它们。 我们还将看到您如何建议和更新来自不同项目的更改，以便您的团队可以在组件上协作以构建多个应用程序。

为什么要共享单个组件？

在尝试共享组件时，我们经常会遇到诸如“如何对这些组件进行版本和更新？如何使单个组件可供使用？如何使组件可发现以供我们的团队在其代码中查找和使用？”的问题。

Bit旨在管理多个存储库中的原子组件。 它使用所有文件，依赖关系和设置（编译器等）隔离项目中的组件。 然后，它使您可以在其他项目中使用它们，同时管理对源代码和相关性的更改。 它还可以使用Git和NPM等工具，并提供免费的共享组件中心，您可以在其中托管，组织和发现团队的组件。

让我们看看如何利用Bit为Angular提供的新支持来实现可重用组件之间的共享和协作。 这是GitHub上ngPrime库中`src / app / components /的示例 ：

使用Bit，无需任何重构，它就被共享为可重用组件的集合，您现在可以在不同项目中发现和使用这些组件 ：

每个组件在使用前都可以在操场上播放，也可以使用NPM或Yarn安装。 您还可以使用Bit导入组件的代码，进行更改并更新组件的版本。 让我们看看如何为自己的项目创建共享集合。 它可以与库项目一起使用，也可以直接在应用程序之间使用-由您决定。

在开始之前，您还可以查看Angular团队审阅的Bit Angular教程和Bit Angular指南 。

1.跟踪Angular项目中的重用组件

让我们开始吧。 选择其中包含一些Angular组件的项目tat，并确保每个组件都被ngModule包装。 如果您没有项目，则可以根据官方NG教程尝试该演示应用程序 。

简短的设置

首先，转到bit.dev并创建一个免费帐户。 在那里，您以后可以托管和共享您的组件。 接下来，安装Bit并运行`bit login`以将Bit身份验证到您的bit.dev帐户：

$  npm install bit-bin -g

$  bit login

现在转到Angular项目并启动Bit工作区：

$  bit init

而已。 现在，您已准备好开始共享组件。

添加组件

在大多数情况下，Angular团队建议将每个组件都保留在ngModule中。 让我们告诉Bit跟踪项目的src / app / components目录中的所有组件。

对于Angular组件，我们还需要指定组件入口点，在大多数情况下，它将是包含ngModule的文件。 这是一个例子：

$  bit add src/app/components/*/ -m 'src/app/components/{PARENT}/{PARENT}.ts'

Bit现在跟踪目录中的所有组件，并将每个组件包装在一个单独的“胶囊”中，其中包含该组件的文件及其所具有的任何依赖关系（Bit分析代码以识别所有依赖关系并将其添加为组件的胶囊）。

您可以运行一个快速的“位状态”来验证一切正常，如果位发现它们丢失，则添加任何丢失的文件或相关性。

$  bit status
new components

     > component-name1 ... ok
     > component-name2 ... ok

定义编译器

在我们可以在其他项目中共享和重用该组件之前，我们必须确保代码可以在您的项目之外构建和运行。 为此，我们添加一个编译器来构建组件。 bit.dev提供了许多编译器 （您可以添加自己的编译器 ），因此让我们安装Angular编译器 ：

$  bit import bit.envs/compilers/angular --compiler 
the following component environments were installed
- bit.envs/compilers/angular@0.1.9

2.将组件共享到您的重用集合

因此，现在可以跟踪，打包和准备共享您的组件了。 接下来，让我们为组件设置一个版本。 Bit使您可以为每个组件设置一个单独的版本，以便以后可以开发和更新此组件而无需将其耦合到库项目的其余部分。

让我们为回购中跟踪的所有组件设置一个0.0.1的semver。

$  bit tag --all 0.0.1
N component(s) tagged

new components
(first version for components)
     > component-name1@0.0.1
     > component-name2@0.0.1

您可以运行另一个“位状态”来查看您的组件是否已版本化并准备共享。

$  bit status
staged components

     > component-name1. versions: 0.0.1 ... ok
     > component-name2. versions: 0.0.1 ... ok

这里要注意的重要一点是该组件被视为已暂存。 这意味着它现在可以导出了。

要将组件导出到您的bit.dev集合，我们将使用export命令和集合的全名，结构为<用户名>。<集合>：

$  bit export <username>.<collectionname>

exported N components to scope <username>.<collectionname>

就是这样：)现在转到bit.dev上的集合，并查看Angular组件。 您可以按上下文，名称，bundle-size，依赖关系和其他有用的参数搜索组件。

并且，您可以在组件页面的实时游乐场中为每个组件创建并保存示例 。

这些示例还将转换为屏幕快照，这些屏幕快照将显示在集合页面和搜索结果中，以进行快速的视觉浏览。 接下来，让我们看看如何在新项目中安装单个reusbale Angular组件。

3.使用npm / yarn安装组件

这是在bit.dev开源社区中创建的Angular旋转器组件的示例。 让我们看一下组件。

如您所见，左侧窗格建议安装带有工具。 让我们使用NPM客户端从bit.dev注册表中安装组件。 由于您已经运行了“位登录”，因此您的NPM客户端已经配置为支持bit.dev作为范围内的注册表来安装软件包。

转到新项目，然后复制粘贴安装命令：

npm i @bit/joshk.ng-spinners.facebook-loader

就是这样。 看一下新项目的“ package.json”文件。 通过安装单个组件，您可以避免将整个库添加到新应用程序中带来的繁重负担，复杂性和开销。

然后，您可以像其他任何软件包一样在代码中使用它 。

4.更新消耗项目中的组件

Bit具有另一种独特的功能，在共享组件之间进行协作时可能会很有用。 您可以使用Bit 将组件的源代码直接带到使用中的项目中，并直接对代码进行更改 （作为软件包安装时是不可能的）。

只需设置CLI即可为新项目运行`bit init：

$  bit init

然后从bit.dev复制粘贴导入命令：

bit import joshk.ng-spinners/facebook-loader

现在，您可以在使用项目中直接更改代码。 完成后，运行“位状态”以验证是否跟踪了更改。

$  bit status

modified components
(use "bit tag --all [version]" to lock a version with all your changes)
(use "bit diff" to compare changes)

     > component-name ... ok

现在，标记组件以更改其版本，并将其共享回您的收藏集或新收藏集。

$  bit tag product-list
1 component(s) tagged

changed components
(components that got a version bump)
     > <username>.<collectionname>/componentname@0.0.2

$  bit export <username>.<collectionname>
exported 1 components to scope <username>.<collectionname>

通过传递`eject`标志，您甚至可以将组件移回`package.json`中的包依赖关系。 这意味着您可以直接从使用项目中更改组件的程序包，而不必等待PR到原始存储库。 有用吧？ :)

接下来，您可以回到共享组件的原始项目， 进行更改 ，并利用Bit对Git的扩展来“ 签出 ”新版本并合并它们之间的更改。

这意味着您可以将更改同步并合并到在不同Angular项目中进行的共享组件。 您可以控制在bit.dev集合中推送新版本的权限，因此可以帮助您增加共享组件的采用率，而又不会影响保持标准。

让每个人都在可重用组件上进行协作

当您的组件作为重用集合共享时，不同的团队成员可以在您的所有组件上进行协作。 开发人员可以为其项目添加，搜索，使用和更新组件。 设计人员可以在实际组件的基础上与开发人员合作，弥合图像和代码之间的鸿沟，从而创建活跃的组件设计系统。

诸如市场营销和产品之类的其他人也可以合作，以了解哪些组件可用以及它们可以快速构建什么。 您还可以将组件共享给开源社区，并发现世界各地成千上万的开发人员共享的组件。

结论

回顾几年，展望未来，模块化是更好，更快地开发软件的关键。 自上世纪60年代以来，软件模块化就在这里，如今，它甚至比组件更实用，尤其是在前端空间中，通过组件。

通过创建组件经济，不同的人可以轻松地共享组件“乐高框”，您可以将应用程序构建转变为可重复使用的组件的组合，这些组件也可以独立发展。 对于Angular，这只是与组件一起构建的自然组合。

感谢您的阅读，可以随时动手动手 ， 探索开源组件社区或提出任何问题。 干杯。

这篇文章是由Bit的开源团队的成员撰写的。 随意 取得联系 的任何问题，帮助或只是打个招呼:)

From: https://hackernoon.com/sharing-reusable-components-in-angular-to-build-apps-faster-h48z30s4