В моем проекте Angular я использую библиотеку leaflet, которая является модульной библиотекой .
Несмотря на то, что она является модульной библиотекой, leaflet объявляет глобальнуюL переменная для "устаревшего" приложения, не использующего загрузчик модулей в своем приложении.
Недавно нам пришлось интегрировать плагин NonTiledLayer Leaflet в наш проект.Цель этой библиотеки - «обогатить» глобальную переменную L, предоставляемую leaflet, и добавить новые служебные классы (например, L.NonTiledLayer).
Этот плагин, когда распространяется через npm, являетсяне объявлен как модуль (в импортированных источниках npm нет define()).
"use strict";
var L = (typeof window !== "undefined" ? window['L'] : typeof global !== "undefined" ? global['L'] : null);
L.NonTiledLayer = (L.Layer || L.Class).extend({
//....
Насколько я понимаю, это означает, что код выполняется "как есть" (без отложенной загрузки), когда Webpack передает его в приложение.
Проблема возникает ввремя выполнения, потому что то, что я вижу в хронологическом порядке (с точками останова отладки), это:
leaflet модуль объявлен, но его тело не выполняется, поскольку ни один модуль не использовал его в то время. leaflet.nontiledlayer выполняется (без объявления модуля), поэтому глобальная переменная window.L обогащается NonTiledLayer объектом.
Обратите внимание, что я не на 100% понимаю, почему L переменная не undefined при выполнении leaflet.nontiledlayer кода ... Я думаю, что-то упустил в какой-то момент. - Некоторые модули в зависимости от модуля
leaflet выполняют leaflet отложенную загрузку.Объявлена новая переменная window.L и переопределяет ту, которая определяется leaflet.nontiledlayer ... что делает утилиты leaflet.nontiledlayer недоступными.
Так что, в основном, моя проблемаЯ хотел бы либо:
- Рассмотреть возможность загрузки
leaflet модуля "очень рано" (избегая отложенной загрузки), по крайней мере, до того, как leaflet.nontiledlayer код будет достигнут / выполнен - ИЛИпреобразовать
leaflet.nontiledlayer в модуль и сделать так, чтобы он зависел от модуля leaflet, чтобы обеспечить загрузку leaflet до leaflet.nontiledlayer
Я думаю, я мог бы добиться этого, настроив немного Webpack (используя shims, я думаю) ... но я бы хотел избежать ng eject, если это возможно.
И я не нашел никакой документации Angular, позволяющей легко объявлять такую конфигурацию.
В настоящее время мой обходной путь заключается в непосредственной интеграции файлов Leaflet.NonTiledLayer js в мой проект, преобразовании его в файл TS и размещении import в leaflet в начале файла, чтобы объявить зависимость от leaflet ипреобразовать обычный файл JS в модуль TS.Это быстрое и грязное решение работает, но оно имеет много недостатков:
- Не разрешать легкое обновление
leaflet.nontiledlayer версии (через менеджер пакетов) - Мне нужно импортировать TSфайлы в моем корневом модуле приложения, чтобы он выполнялся раньше.Я не уверен, но есть вероятность, что дерево потрясет мой удалить этот импорт, когда веб-пакет заметит, что мой импортированный модуль никогда не используется в моем коде.
- Если кто-то удалит этот импорт когда-нибудь, он больше не будет работать имы можем не заметить этого, если не пойдем на экран карты.
Я уверен, что есть лучшее решение, но мне не хватает некоторых знаний Angular x Webpack здесь.
Заранее спасибо,