React-ProjectでCDN Importsを使用する方法

Question

私のプロジェクトはcreate-react-appに基づいており、今はHere Mapsを使いたいと思います。彼らのドキュメンテーションは、CDNでモジュールをロードすることを推奨しており、NPNパッケージを見つけることができません。今私の質問は：どのようにCDNを正しく読み込むことができますか？

私はindex.htmlファイル内にCDNリンクを置く可能性があることを知っていますが、これは私が考える正しい解決策ではないようです。

Answer 1

だ、私はこのユースケースのための解決策を見つけました。 私はこのパッケージ"html-webpack-externals-plugin"をインストールしました。

あなたがしなければならないことは、ユースケースのドキュメントを読んでください。 「CDN使用ケース」についても説明します。

外部JS-APIから関数にアクセスするには、「ウィンドウ」を配置する必要があります。たとえば、関数の前に次のように入力します。

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

これは誰かに役立つことを願っています！

Answer 2

JSスクリプトタグをプログラムで追加することができます。ここでの例では、いくつかのことを試した後

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

使用例

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