Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to load remote file in webpack

 the remote file is a single components compiled by webpack 
  the wenpack config as follow:


    {
     .....
     library: library
    ,externals: externals
    ,libraryTarget: "umd"
     .....
    }

the components is in the cdn, i want to load and use the remote components in react. and how to use it like the Pseudo code :

   ajax -> get a json > { components name } > use the name to load romote file    
   for example the json have the botton i need to load the botton.min.js

    var Button = reuqire('http://botton.min.js')
    class App extends React.Component {
    render() {
        return (
            <div>
            <Botton/>
            </div>
        );
    }
}
export default App;
like image 508
abnerCrack Avatar asked Oct 30 '22 05:10

abnerCrack


2 Answers

npm install scriptjs
var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
  $('body').html('It works!')
});
like image 104
Johnny Avatar answered Nov 02 '22 23:11

Johnny


As I said in the other post: I have looked around for a solution and most of all proposals were based on externals, which is not valid in my case.

More info here: https://stackoverflow.com/a/62603539/8650621

Basically, I finished using a separate JS file which is responsible for downloading the desired file into a local directory. Then WebPack scans this directory and bundles the downloaded files together with the application.

like image 28
Felipe Desiderati Avatar answered Nov 02 '22 23:11

Felipe Desiderati