RequireJS laden Wicket-Bibliothek

Question

Ich verwende die Bibliothek Wicket für Kartenmaterial. Wenn ich es als Skript-Tag als normal referenziere, funktioniert es gut. Arbeitslink wie unten.

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

Das Problem kommt, wenn unser Projekt RequireJS für Modullader verwendet.

Dies ist der folgende Code, den ich ausprobiert habe.

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']); 
    }); 
}); 

Der Fehler ist immer noch wie folgt.

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

Hat jemand das gleiche erlebt?

Answer 1

Die Datei wicket.js hat einen Anruf an define. Eine shim dafür zu setzen ist nutzlos, weil shim nur für nicht-AMD "Module" sinnvoll ist (d. H. Dateien, die nicht wirklich Module sind, die wir aber so verhalten wollen). AMD-Module rufen define.

Auf der anderen Seite wicket-gmap3.js ist kein AMD-Modul. So brauchen Sie brauchen die shim dafür. Es hängt jedoch davon ab, dass Wkt im globalen Bereich vorhanden ist. Die Logik in wicket.js ist so, dass beim Aufruf Wkt im globalen Raum nicht gesetzt ist. (Welcher ist das korrekte Verhalten für artige AMD-Module.) Sie müssen die Leckage selbst durchführen.

Ihre Konfiguration ändern:

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'] 
     }   
    }, 
}); 

Ich habe ein neues Modul namens wicket-glue hinzugefügt. Ich lege solche Module oft zusammen mit der Konfiguration, so dass sie keinen zusätzlichen Datenabruf benötigen. Sie könnten es genauso gut in eine separate Datei einfügen, wenn Sie möchten. (Wenn ich das täte, dachte ich, das erste Argument define entfernen würde und benennen Sie die Datei wicket-glue.js so dass RequireJS den Modulnamen aus dem Dateinamen nimmt.)

Außerdem habe ich eine map, die im Wesentlichen sagt „in Alle Module, wenn das Modul wicket erforderlich ist, laden Sie stattdessen wicket-glue, aber in wicket-glue, wenn wicket erforderlich ist, laden Sie wicket ".

Der Nettoeffekt ist, dass, wenn wicket erforderlich ist, Wkt wird auf den globalen Raum und wicket-glue sollte gut funktionieren.