Question

我使用webpack来管理我的反应应用程序。现在我想从这个url导入一个依赖项：

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

传统上我只是将上面的代码放在我的index.html文件中。但是现在我怎么能让webpack加载这个url？我的反应js如何使用这种依赖？

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

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

然后我使用小装载程序加载网址。下面是使用loader的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); })

webpack如何从外部URL导入

1 个答案: