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

时间:2018-07-16 04:26:18

标签: javascript angular npm angular-module angular-library

假设存在一个用普通Javascript编写的Javascript库,该Java库通常在原始的非框架网站上使用。如何创建可以轻松npm install进行编辑的Angular库,从而使该库可以无缝地在Angular应用中使用?

我在Angular文档或更广泛的网络中找不到关于此过程的任何很好的演示。

例如,有一个了不起的Javascript库,名为p5.js,要使用Angular并不容易。如何创建一个Angular模块,您可以将其简单地导入自己的Angular模块中,并在全面的Angular支持下使用其所有强大功能?

2 个答案:

答案 0 :(得分:6)

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

看看create library story。它非常简单明了,它将帮助您快速入门,并指导您进行更新的最佳实践。

答案 1 :(得分:1)

为 Angular 包装原生库是一个复杂的过程,因为具体情况因库而异。话虽如此,我们可以利用共同点。

设计包装库时的 3 个主要问题是:

  1. 检测 Angular 库中的更改并将其委托给本机库。
  2. 检测原生事件并将它们冒泡到您的 Angular 库中。
  3. 使用 NgZone 在 Angular 内外切换执行。

其他考虑因素可能是性能、可扩展性、在现有工具上添加新工具等。无论您正在处理什么库,您最终都可能会用函数包装一个函数,用一个类包装一个类,带有模块的模块等。假设本机库有 1000 个功能。你会一一实施所有这些吗?

有一些方法可以避免手动实现本机库中的每个元素,同时仍将它们的功能带入您的包装器库。 我已在 more details here

中回答了这个问题