如何在 React 项目中使用 CDN 导入

Question

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

我知道可以将 CDN link 放入我的 index.html 文件中，但我认为这似乎不是正确的解决方案。

Answer 1

您可以通过编程方式添加 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})
  });
}

Answer 2

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

您所要做的就是阅读您的用例的文档。 "CDN-Use-Case"也有说明。

为了从外部 JS-API 访问函数，您必须在函数前面放置一个 "window."，例如：

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

希望这对某人有所帮助！

如何在 React 项目中使用 CDN 导入

How to use CDN Imports in a React-Project

cdn

reactjs

create-react-app