RequireJS load Библиотека калитки

Question

Я использую библиотеку Wicket для картографического материала. Если я ссылаюсь на него как на тег скрипта как обычно, он отлично работает. Рабочая ссылка, как показано ниже.

https://arthur-e.github.io/Wicket/sandbox-gmaps3.html

Проблема возникает, когда наш проект использует RequireJS для загрузки модуля.

Это следующий код, который я пробовал.

require.config({  
    waitSeconds: 200, 
    paths: { 
     'wicket': '/Vendor/Wicket/wicket', 
     'wicketGmap3': '/Vendor/Wicket/wicket-gmap3' 
    }, 
    shim: { 
     wicket: { 
      exports: 'Wkt' 
     }, 
     wicketGmap3: {    
      deps: ['wicket'] 
     }   
    }, 
}); 
require(['wicket', 'wicketGmap3'],(Wkt) => { 
    $(() => { 
     angular.bootstrap(document, ['app']); 
    }); 
}); 

Ошибка все еще такая, как указано ниже.

Uncaught ReferenceError: Wkt is not defined at wicket-gmap3.js:744

Кто-нибудь испытал то же самое?

Answer 1

wicket.js файл имеет вызов define. Поэтому установка shim для него бесполезна, потому что shim имеет смысл только для «модулей», отличных от AMD (т. Е. Файлов, которые не являются модулями, но которые мы хотим вести себя так, как если бы они были). Модули AMD звонят define.

С другой стороны, wicket-gmap3.js не является модулем AMD. Итак, вы do нужны shim для этого. Однако это зависит от Wkt, присутствующих в глобальном пространстве. Логика в wicket.js такова, что когда она вызывает define, она не устанавливает Wkt в глобальном пространстве. (Какой - правильное поведение для хорошо продуманных модулей AMD.) Вам необходимо выполнить утечку самостоятельно.

Изменение конфигурации в:

define("wicket-glue", ["wicket"], function (wicket) { 
    Wkt = wicket; // Deliberately leak into the global space. 
    return wicket; 
}); 

require.config({  
    waitSeconds: 200, 
    paths: { 
     'wicket': '/Vendor/Wicket/wicket', 
     'wicketGmap3': '/Vendor/Wicket/wicket-gmap3' 
    }, 
    map: { 
     '*': { 
      wicket: 'wicket-glue', 
     }, 
     'wicket-glue': { 
      wicket: 'wicket' 
     } 
    } 
    shim: { 
     wicketGmap3: {    
      deps: ['wicket'] 
     }   
    }, 
}); 

Я добавил новый модуль с именем wicket-glue. Я часто размещаю такие модули вместе с конфигурацией, чтобы они не требовали дополнительной выборки данных. Вы могли бы просто поместить его в отдельный файл, если хотите. (Если бы я сделал это, я бы удалить первый аргумент define, хотя и имя файла wicket-glue.js так, что RequireJS берет имя модуля от имени файла.)

Я также добавил map, который по существу говорит «в все модули, если требуется модуль wicket, вместо этого загрузите wicket-glue, но в wicket-glue, если требуется wicket, загрузить wicket ".

Чистый эффект заключается в том, что когда требуется wicket, Wkt будет просочиться в глобальное пространство, а wicket-glue должно работать нормально.