Verwendung von CDN-Importen in einem React-Projekt

Question

Mein Projekt basiert auf create-react-app und ich möchte jetzt Here Maps verwenden. Ihre Dokumentation empfiehlt das Laden der Module mit CDN und ich kann keine NPM-Pakete dafür finden. Meine Frage ist jetzt: Wie kann ich das CDN richtig laden?

Ich weiß, dass es die Möglichkeit gibt, den CDN-Link in meine index.html-Datei zu legen, aber das scheint nicht die richtige Lösung zu sein, denke ich.

Answer 1

Nach ein paar Dinge auszuprobieren, fand ich eine Lösung für diesen Anwendungsfall. Ich habe dieses Paket "html-webpack-externals-plugin" installiert.

Alles, was Sie tun müssen, ist die Dokumentation für Ihren Anwendungsfall zu lesen. Der "CDN-Use-Case" wird ebenfalls beschrieben.

Für den Zugriff auf die Funktionen von der externen JS-API müssen Sie ein "Fenster" setzen. vor der Funktion zum Beispiel so:

const map = new window.H.Map(); 

Hoffe das hilft jemandem!

Answer 2

Sie können JS-Skript-Tags programmgesteuert hinzufügen. Hier ist ein Beispiel

function loadScript({src, id, callback}) { 
    if(id && document.getElementById(id)){ 
    return; // don't accidentally re-add 
    } 
    const script = document.createElement('script'); 
    if(callback){ 
    script.onload = callback; 
    } 
    if(id){ 
    script.setAttribute('id', id); 
    } 
    script.setAttribute('src', src); 
    document.body.appendChild(script); 
} 

Anwendungsbeispiel

componentDidMount(){ 
    loadScript({ 
    src: 'http://js.api.here.com/v3/3.0/mapsjs-core.js', 
    id: 'script-mapsjs-core', 
    callback:() => this.setState({mapsjsCoreLoaded: true}) 
    }); 
}