如何为现有的 Javascript 库创建 Angular 库包装器？

Posted 2023-03-06

【中文标题】如何为现有的 Javascript 库创建 Angular 库包装器？

【英文标题】：How does one go about creating an Angular library wrapper for an existing Javascript library?

【发布时间】：2018-12-23 13:46:26

【问题描述】：

假设存在一个用纯 javascript 编写的 Javascript 库，通常用于普通的非框架网站。如何创建一个可以轻松使用npm installed 的 Angular 库，以使该库无缝地在 Angular 应用程序中使用？

我在 Angular 文档或更广泛的网络上找不到这个过程的任何好的演示。

例如，有一个很棒的 Javascript 库，名为 p5.js，它不能直接与 Angular 一起使用。如何创建一个 Angular 模块，您可以简单地将其导入到您自己的 Angular 模块中，并在完全支持 Angular 的情况下使用它的所有强大功能？

【问题讨论】：

这有点取决于库的作用。是否使用 DOM 差别很大。

我问的是一个专门使用 DOM 但我对所有类型都很好奇

【参考方案1】：

就个人而言，我会使用 Angular CLI。 Angular CLI v6 内置了 ng-packgr。

看看create library story。它非常简单，可以帮助您快速入门，并指导您使用最佳更新实践。

更新：对于 Angular CLI v7 及更高版本，请参阅文档 here

【参考方案2】：

为 Angular 包装原生库是一个复杂的过程，因为具体情况会随着库的变化而变化。话虽如此，我们可以利用有个共同点。

设计包装库时的三个主要问题是：

检测 Angular 库中的更改并将其委托给本机库。 检测本机事件并将它们冒泡到您的 Angular 库中。 使用 NgZone 切换执行进出 Angular。

其他考虑因素可能是性能、可伸缩性、在现有工具上添加新工具等。无论您处理的是什么库，您最终都可能会用函数包装函数，用类包装类，一个模块一个模块，等等。假设本机库有 1000 个特性。你会一一实现吗？

有一些方法可以避免手动实现本机库中的每个元素，同时仍将它们的功能引入您的包装库。 我已经在more details here回答了这个问题