Как можно создать оболочку библиотеки Angular для существующей библиотеки Javascript?

Question

Предположим, что существует библиотека Javascript, написанная на простом Javascript и широко используемая на ванильных неструктурированных веб-сайтах. Как можно создать библиотеку Angular, которая может быть легко npm installЧто бы сделать библиотеку бесшовной для использования в приложении Angular?

Я не могу найти хороших демонстраций этого процесса в англоязычных документах или в широкой сети.

Например, есть фантастическая библиотека Javascript, которая называется p5.js, который не так просто использовать с Angular. Как можно было бы создать модуль Angular, который можно просто импортировать в собственный модуль Angular и использовать все его замечательные функции с полной поддержкой Angular?

Answer 1

Лично я бы пошел с Angular CLI. Угловой CLI v6 имеет встроенный ng-packgr.

Взгляните на историю создания библиотеки. Это довольно просто и поможет вам быстро приступить к работе, а также предоставит вам рекомендации по обновлениям.

Answer 2

Обертывание собственной библиотеки для Angular - сложный процесс, поскольку специфика меняется от библиотеки к библиотеке. Это , как говорится, есть в общностей мы могли бы использовать в своих интересах.

Основные 3 проблемы при разработке библиотеки-оболочки:

1. Обнаружение изменений в вашей библиотеке Angular и делегирование их нативной библиотеке.
2. Обнаружение собственных событий и их добавление в вашу библиотеку Angular.
3. Переключение выполнения в Angular и из него с помощью NgZone.

Другие соображения могут быть связаны с производительностью, масштабируемостью, добавлением новых инструментов к существующим и т. Д. Независимо от того, с какой библиотекой вы имеете дело, вы, вероятно, в конечном итоге обернете функцию функцией, класс с классом, модуль с модуль и т. д. Допустим, в нативной библиотеке 1000 функций. Вы бы реализовали их все по очереди?

Есть способы избежать необходимости вручную реализовывать каждый элемент в собственной библиотеке, сохраняя при этом их функции в вашей библиотеке-оболочке. Я ответил на это более подробно здесь