Question

我的项目基于create-react-app，现在我想使用Here Maps。他们的文档建议使用CDN加载模块，我无法找到任何NPM包。我现在的问题是：如何正确加载CDN？

我知道有可能只将CDN链接放在我的index.html文件中，但这似乎不是我认为的正确解决方案。

Answer 1

在尝试了一些事情之后，我找到了这个用例的解决方案。我安装了这个包"html-webpack-externals-plugin"。

您所要做的就是阅读用例的文档。还描述了“CDN-Use-Case”。

要从外部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})
  });
}

如何在React-Project中使用CDN Imports

2 个答案: