webpack 如何从外部 url 导入 [英] how does webpack import from external url
问题描述
我正在使用 webpack 来管理我的 React 应用程序.现在我想从这个 url 导入依赖项:
I am using webpack to manage my react application. Now I want to import a dependency from this url:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=gNO2wKVBNupZfafi0bl0sW3dIKqAHn4l">
传统上我只是将上面的代码放在我的 index.html 文件中.但是现在我怎样才能让 webpack 加载这个 url?以及我的 react js 如何使用该依赖项?
traditionally I just put above code on my index.html file. But now how can I let webpack to load this url? And how my react js use that dependency?
当我启动 webpack-dev-server 时,我会得到以下错误:
when I launch webpack-dev-server, I will get below error:
ERROR in Entry module not found: Error: Cannot resolve module 'http://api.map.baidu.com/api'
然后我使用小加载器来加载 url.下面是使用 loader 的 javascript 代码:
Then I use little loader to load the url. Below is the javascript code to use loader:
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 时仍然出现以下错误:
but I still got below error when launch 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
推荐答案
将来你应该可以通过 System.import
使用动态需求.Webpack 2 将原生支持它们.
In the future you should be able to use dynamic requires via System.import
.
Webpack 2 will support them natively.
System.import('<url>')
.then(function() {
console.log('Loaded!');
});
如果您不想等待,可以使用脚本加载库.
If you don't want to wait for it, you could use a script loading library.
示例:
安装:
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 导入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!