How to inject a dependency on an external script

Question

I'm using a cloud service called Parse in a JavaScript closure injected with require.js:

define([/*some dependencies*/], 
   function(/*some dependencies*/) {

     ...

     // using Parse. For example:
     var TestObject = Parse.Object.extend("TestObject");

     ...

}

The tutorial for using Parse in Javascript instructs to include their script in the HTML header:

<script src="//www.parsecdn.com/js/parse-1.4.2.min.js"></script>

I don't want the HTML page to depend on Parse and I don't want to clutter the HTML with external scripts. Instead, I would like to require parse-1.4.2.min.js directly from the script. What's the proper way of doing so? How do I define this dependency and make it work?

there is something like importScripts("script2.js"); in javascript. i have used in web worker but haven't used it as you wanted. try it may be it will work. — chiragchavda.ks, Jun 28 '15 at 03:59

som · Answer 1 · 2015-07-05T04:41:08.527

Similar to jQuery, Parse adds itself to the global scope on load. If no other scripts depend on it, it can simply be included as a dependency in a module or require call.

require([
    'https://www.parsecdn.com/js/parse-1.4.2.min.js',
], function () {
    console.log(Parse);
}

If you are using any other non-AMD scripts that depend on Parse (or any other library) you will need to use a config/shim. It tells requireJS what order it should load the scripts, based on their dependencies.

E.g. when using a jQuery plugin, you wouldn't want it to load and execute before jQuery itself.

A config/paths setup also helps organise your project by allowing script locations to be defined in a single location and then included by reference.

See the requireJS docs for more info.

The following config/require successfully loads Parse and a fictional plugin:

require.config({

  // define paths to be loaded, allows locations to be maintained in one place
  paths: {
    parse: 'https://www.parsecdn.com/js/parse-1.4.2.min',
    plugin: 'example-non-amd-parse-plugin.js'
  },

  // define any non-amd libraries and their dependancies
  shim: {
    parse: {
      exports: 'Parse'
    },
    plugin: {
      exports: 'plugin',
      deps: ['parse']
    }
  }
});

require(['parse'], function(Parse){
  console.log(Parse);
});

// note Parse is not required
require(['plugin'], function(plugin){

  // Parse is available as it is depended on by plugin and on the global scope
  console.log(Parse, plugin);
});

Can you explain why this is better than just requiring `"https://www.parsecdn.com/js/parse-1.4.2.min.js"`, which also worked? — Ilya Kogan, Jul 04 '15 at 20:46
It looks like Parse doesn't actually depend on jQuery and also adds itself to the global scope on load. If you are running all your code within a single function then your method should work fine. The config comes in handy when you are using other scripts that rely on Parse (or jQuery). It also keeps things organised. I've updated my answer. — som, Jul 05 '15 at 02:46

score -5 · Answer 2 · answered Jun 28 '15 at 08:12

-5

So after all I just wrote this and it seems to work. Don't know what the problem was in the first place...

define(["https://www.parsecdn.com/js/parse-1.4.2.min.js"], 
   function () {

answered Jun 28 '15 at 08:12

Ilya Kogan

21,995
15
85
141

How to inject a dependency on an external script

2 Answers2