47

I am using react starter kit for client side programming. It uses react and webpack. No index.html or any html to edit, all js files. My question is if I want to load a vendor js lib from cloud, how to do I do that?

It would be easy to do that in a html file. <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>

However, in js file, it only uses npm installed packages. How can I import the above lib with no html file? I tried import and require, they only work for local files.

update 10/21/15 So far I tried two directions, neither is ideal.

  1. @minheq yes there is a html file sort of for react start kit. It is html.js under src/components/Html. I can put cloud lib and all its dependencies there like this:
        <div id="app" dangerouslySetInnerHTML={{__html: this.props.body}} />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
        <script src="/app.js"></script>
        <script dangerouslySetInnerHTML={this.trackingCode()} />
    </body>

Good news is it works, I don't need do anything else in js file, no import or require. However, now I have two jquery libs loaded in different ways. One in here, the other through npm and webpack. I wonder it will give me trouble later. The react-routing I use give me 'undefined variable' error if I type a none home path in browser window due to the server side loading I guess. So this solution is not very good.

  1. Use webpack externals feature. This is documented as: link. "You can use the externals options for applications too, when you want to import an existing API into the bundle. I.e. you want to use jquery from CDN (separate tag) and still want to require("jquery") in your bundle. Just specify it as external: { externals: { jquery: "jQuery" } }." However, the documentation I found a few places are all fussy about how to do this exactly. So far I have no idea how to use it to replace <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script> in html.
Ahmed Ashour
  • 5,179
  • 10
  • 35
  • 56
jay.m
  • 1,618
  • 3
  • 16
  • 28
  • 3
    Do you want to `require('jquery')`, external `'jquery': 'jQuery'`, `npm install jquery --save`, and have webpack write `` (current latest version) in your html instead of including all 35kb in the bundle? – Jordan Warbelow-Feldstein May 26 '16 at 03:19
  • Possible duplicate of [How to use a library from a CDN in a Webpack project in production](https://stackoverflow.com/questions/31575809/how-to-use-a-library-from-a-cdn-in-a-webpack-project-in-production) – mastilver Jul 24 '17 at 08:55

6 Answers6

22

externals is not intended to let you do this. It means "don't compile this resource into the final bundle because I will include it myself"

What you need is a script loader implementation such as script.js. I also wrote a simple app to compare different script loader implementations: link.

Tom Chen
  • 1,489
  • 2
  • 12
  • 17
  • 3
    This is true, the `externals` property simply lets you specify resources that should be _imported_ from the environment at runtime. How you are going to provide the external resource at runtime is left up to you, not webpack. – oens Jul 05 '16 at 12:44
15
var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
  $('body').html('It works!')
});
Johnny
  • 309
  • 1
  • 3
  • 6
  • 2
    I'm giving this a +1 because one of the creators of Webpack had the same answer here: https://github.com/webpack/webpack/issues/240#issuecomment-40686135 – Ryan Mar 21 '17 at 17:11
  • More modern options are using [loadjs](https://github.com/muicss/loadjs) or [require-http](https://www.npmjs.com/package/webpack-require-http). – Berend de Boer May 06 '19 at 23:52
7

You can create a script tag in your JS as

$("body").append($("<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>"))
Jack Spektor
  • 1,097
  • 1
  • 11
  • 30
2

There is one html file that is definitely being used to serve to users with your js bundle attached. Probably you could attach the script tag into that html file

minheq
  • 472
  • 5
  • 12
1

Use webpack's externals:

externals allows you to specify dependencies for your library that are not resolved by webpack, but become dependencies of the output. This means they are imported from the environment during runtime.

Griffith
  • 3,229
  • 1
  • 17
  • 30
  • 20
    Would you elaborate a bit more, such as where to add externals? Link to an example would be great! – jay.m Oct 21 '15 at 03:13
  • i haven't used it but it looks like this https://webpack.js.org/configuration/externals/#externals – Pirijan May 18 '18 at 13:47
0

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

In this other post, I have posted my solution: https://stackoverflow.com/a/62603539/8650621

In other words, 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.

Felipe Desiderati
  • 2,414
  • 3
  • 24
  • 42