Использование глобальных объектов umd с модулями в проекте Typescript

Я пытаюсь заставить библиотеку Leaflet хорошо работать с моим проектом Typescript.

Мой проект следует шаблону commonJs (импорт \ экспорт в моих исходных файлах), но когда я создаю с помощью webpack, компилятор выдает мне следующие ошибки из моих файлов, когда я пытаюсь получить доступ к глобальному L, открытому модулем листовки

«L» относится к глобалу UMD, но текущий файл является модулем. Вместо этого рассмотрите возможность добавления импорта.

Теперь я могу обойти это, если импортирую буклет в свои исходные файлы следующим образом:

import * as L from 'leaflet'

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

Я покопался и нашел несколько обходных путей, с помощью которых вы можете объявить свои собственные глобальные переменные следующим образом:

globals.d.ts

import * as L from "leaflet";

declare global {
  const L: L
}
export {};

Я не уверен, что это рекомендуется, это кажется немного грязным взломом, есть ли правильный способ с конфигурацией webpack для предоставления глобальных объектов, предоставляемых модулями UMD для проекта commonJs, или я несу чушь? Признаюсь, я запутался, пытаясь понять различия между типами модулей и их взаимозаменяемость, так что не беспокойтесь!


person mindparse    schedule 24.02.2018    source источник


Ответы (1)


В модуле вы можете импортировать другие модули или использовать глобальные переменные. Невозможно импортировать модуль сразу во все ваши модули. Если лень писать везде импорт, то стоит использовать глобальную переменную.

Модульная система УМД универсальна. Если он импортируется в какой-либо модуль (CommonJS, AMD ...), он ведет себя как модуль, то есть не заполняет глобальную область видимости. Если вы хотите, чтобы UMD стал глобальным, вам нужно просто добавить его как <script> на страницу. Затем вы можете использовать .d.ts. файл для уведомления TypeScript, что листок доступен в глобальной области. Никакого взлома там нет (к тому же использование глобальной области видимости вместо модулей - это уже само по себе хакерство).

person Pavel    schedule 25.02.2018
comment
Дело не в лени. В проекте моей компании мы объединяем *.min.js файлы библиотеки UMD вручную с помощью задачи Gulp, но мы изменили весь код TypeScript на модули. Мы компилируем в модули SystemJS и не включаем Webpack в проект, и для переписывания структуры проекта потребуются значительные усилия. Таким образом, объявление в глобальном пространстве имен необходимо, чтобы иметь возможность использовать глобальные объекты UMD без жалоб TypeScript. - person Sam Claus; 06.03.2019
comment
потребуются значительные усилия, чтобы переписать структуру проекта - а что, если не лень и наследственность? :) - person Pavel; 13.03.2019
comment
Я один человек, поддерживающий / обновляющий кодовую базу 40KLOC +. Хотя я часто переписываю старые дрянные части кода и получаю от этого удовольствие, мне приходится отдавать приоритет новым функциям, и переписывание структуры модуля находится в конце списка. Я должен сказать, что теперь мне жаль, что я никогда не читал сообщение в блоге, подразумевающее, что Webpack больше не нужен, потому что в какой-то момент я перенес код на модули SystemJS и выбросил Webpack. Итак, теперь я думаю, мне нужно отменить это, потому что TypeScript не позволяет мне хорошо использовать UMD из модулей (насколько я могу судить без уважительной причины). ›:( - person Sam Claus; 14.03.2019
comment
Вы можете взломать что-то вроде window.globalVar = yourImportedVar; или что-то в этом роде. Есть много способов решить такие устаревшие проблемы - это зависит от вашей среды. - person Pavel; 14.03.2019