代码之家 › 专栏 › 技术社区 › Aleks

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

create-react-app cdn reactjs

Aleks · 技术社区 · 7 年前

我的项目是基于创建反应应用程序,现在我想使用 Here Maps . 他们的文档建议用CDN加载模块,我找不到任何适用于它的NPM包。我现在的问题是:如何正确加载CDN?

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

2 回复 | 直到 7 年前

Aleks 7 年前

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

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

为了从外部JS-API访问函数,您必须放置一个“窗口”在函数前面,例如:

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

希望这对别人有帮助!

Kunukn 7 年前

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

推荐文章