Как создать оболочку Angular вокруг существующей библиотеки Javascript?

Question

У меня есть чистая библиотека JavaScript, которую пользователи могут установить через npm. Я хочу добавить / создать Angular "обертку" к этой библиотеке, чтобы ее можно было без проблем использовать в проектах Angular, но я не уверен, как это сделать. Я использую Angular-Cli v6.

Это очень похоже на то, как можно создать оболочку библиотеки Angular для существующей библиотеки Javascript? Однако единственным ответом является ссылка на ng-packagr. Я сделал несколько руководств по созданию библиотеки с помощью ng-packagr, однако они не описывают (и я не могу найти примеры в другом месте) того, как создать оболочку для неангулярной библиотеки JS.

Любая помощь очень ценится!:)

Answer 1

Старый вопрос, но мне он нравится. На это нет однозначного ответа, поэтому вот как я это сделал:

Укороченная версия

Прочтите о внутреннем устройстве и о том, как я упаковал библиотеку Google Maps Javascript API

Длинная версия

Следующее очень абстрактно, но это абстрактный вопрос, так что давайте ...

Основные вещи, которые вам, вероятно, необходимо реализовать:

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

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

Возникает вопрос: «Должен ли я вручную писать весь этот код? Серьезно ли я собираюсь писать метод для каждого собственного метода? Что происходит, когда собственная библиотека меняет реализацию? Мне пришлось бы менять свой код везде ... 🤔"

Чтобы упростить и сделать вашу библиотеку упаковки масштабируемой, вы можете автоматизировать механизм упаковки (один из способов - использовать Javascript ) объект. Объедините его с типами утилит и интерфейсами расширений TypeScript, и вы можете создать класс, который автоматически делегирует вызовы соответствующему собственному объекту / функции, И вы получите intellisense (для методов, которые вам не нужно было вручную реализовывать в вашей оболочке!).

Вот более подробное объяснение с примерами

Для делегирования событий вы можете создать механизм, который генерирует наблюдаемые (или EventEmitters) для ваших собственных событий.

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

Моя библиотека Angular Google Maps с открытым исходным кодом, и вы можете посмотреть. Я реализовал в нем несколько очень интересных архитектурных механизмов. Любой, кто столкнется с этим постом и хочет получить более подробную информацию или помощь, может связаться со мной.

Ура