webpack 如何从外部 url 导入

IT技术 reactjs webpack
2021-04-27 12:34:00

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

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

传统上我只是把上面的代码放在我的 index.html 文件中。但是现在我怎样才能让 webpack 加载这个 url？以及我的 react js 如何使用该依赖项？

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

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

然后我使用 little loader 来加载 url。下面是使用 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
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>', (err) => {

})

或者手动执行

function load(url) {
  return new Promise((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(() => {
    console.log('Loaded!');
  })
  .catch((err) => {
    console.error('Something went wrong!', err);
  })
其它你可能感兴趣的问题
上一篇尝试获取然后使用 react 和 fetch 发送 cookie 下一篇可以打印这种详细程度吗？