Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how does webpack import from external 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">

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?

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'

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'));

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
like image 731
Joey Yi Zhao Avatar asked Apr 08 '16 09:04

Joey Yi Zhao


People also ask

How does webpack import work?

Webpack is a command line tool to create bundles of assets (code and files). Webpack doesn't run on the server or the browser. Webpack takes all your javascript files and any other assets and transforms then into one huge file. This big file can then be sent by the server to a client's browser.

How does webpack dynamic import work?

Whenever you import a file in your code, Webpack will look for it in the project directory and copy it to the build folder with a new name, then Webpack replaces the import code in your bundled JavaScript file with the path to the newly copied file.

How does webpack externals work?

Webpack externals tell Webpack to exclude a certain import from the bundle. Often externals are used to exclude imports that will be loaded via CDN. For example, suppose you are implementing server-side rendering with Vue and Express, but your client-side code imports Vue via a CDN.

Does webpack support import?

The imports loader allows you to use modules that depend on specific global variables. This is useful for third-party modules that rely on global variables like $ or this being the window object. The imports loader can add the necessary require('whatever') calls, so those modules work with webpack.


1 Answers

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.

Example:

Install:

npm install little-loader --save

Use:

import load from 'little-loader';

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

})

Or do it manually

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);
  })
like image 118
HaNdTriX Avatar answered Oct 03 '22 10:10

HaNdTriX