选择用于角度的ui库还是编写自定义库？

问题描述

在向您介绍我们的问题之前，我必须先做一个简短介绍：

我正在由大约10个开发人员组成的团队中编写几个企业应用程序（其中6个对于整个angular / typescript / frontend主题来说是很新的）。我们将所有这些应用程序和库组织在基于NX的monorepo内，因为我们希望它们看起来和感觉相似。

现在我们面临几个问题：我们将PrimeNG，NG-Zorro和ngx-bootstrap用作ui库，但是很难跟踪要从哪个库中使用哪些组件以及这些组件带来的不同样式表的复杂性高得多。例如，我们必须在这些库以及所有应用程序中定义相同的边框颜色。你们如何解决这个问题？

我认为这一切始于我们环顾四周，发现一个库具有与另一个库相比相当有用的特定组件...

现在，我考虑编写一个wrapper-ui-library，以在我们的组织内部使用我们项目中需要的所有组件。我仍然会在后台使用这些库，但是使用这些自定义组件的开发人员不会也不应该知道它是哪个库。

你们认为这是一个好主意还是会产生更多的开销而不是收益？您还会坚持使用一个库来像我们一样使样式更容易或混合搭配吗？

在这方面我真的需要您的帮助，因为随着每个用户的故事，我们的技术债务越来越多...

请多多关照！

解决方法

既然您使用的是monorepo，我希望Monorepo中所有应用程序的外观都一样吗？

在这种情况下，最好在monorepo中创建一个“ UI”库，其中包含所有自定义的样式化组件（类似于Angular Material）。您所有的应用程序都不会直接从某个第三方库中调用该组件，而是会从“ UI”库中调用包装器组件，而后者又会从第三方库中调用组件或使用您的组件。

这种方法的优点是，如果需要进行任何更改，则只需修改“ UI”库，该更改将反映在所有应用程序的任何地方。另外，更不用说，由于您已经创建了“ UI”库，因此开发人员无需关心包装组件在内部使用的内容。因此，从可能的Angular Material切换到Bootstrap不会导致应用程序代码发生任何更改，仅需要对“ UI”库进行更改。

这种方法将充分利用monorepo设置。乍一看似乎有点过分，但是对于在monorepo中长期维护所有应用程序来说，这将非常有帮助。