webpack如何从外部网址导入

Question

我正在使用webpack来管理我的React应用程序。现在，我想从此URL导入依赖项：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=gNO2wKVBNupZfafi0bl0sW3dIKqAHn4l">

传统上，我只是将上述代码放在index.html文件中。但是现在如何让webpack加载此网址？以及我的React JS如何使用该依赖关系？

当我启动webpack-dev-server时，将出现以下错误：

ERROR in Entry module not found: Error: Cannot resolve module 'http://api.map.baidu.com/api'

然后，我使用一点加载程序来加载URL。以下是使用加载程序的JavaScript代码：

import $ from 'jquery'
import React from 'react';
import ReactDOM from 'react-dom';
import load from 'little-loader';

import './main.css';
import './component';
import Search from './search/search'

load('http://api.map.baidu.com/api?v=2.0&ak=gNO2wKVBNupZfafi0bl0sW3dIKqAHn4l', function(err){
    console.log('err:', err);
});

// document.body.appendChild(component());


ReactDOM.render(<Search />, document.getElementById('search'));

但是启动webpack时仍然出现以下错误：

ERROR in Entry module not found: Error: Cannot resolve module 'http://api.map.baidu.com/api' in /Users/yzzhao/dev/react-demo/webpack_demo

Answer 1

将来，您应该可以通过使用动态需求System.import。 Webpack
2
将本地支持它们。

System.import('<url>')
  .then(function() {
    console.log('Loaded!');
  });

如果不想等待，可以使用脚本加载库。

例：

安装：

npm install little-loader --save

用：

import load from 'little-loader';

load('<url>', function(err){

})

或手动执行

function load(url) {
  return new Promise(function(resolve, reject) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = url;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  })
}

load('<url>')
  .then(function() {
    console.log('Loaded!');
  })
  .catch(function(err) {
    console.error('Something went wrong!', err);
  })