Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can multiple instances of require (require.js) play nice together

I think I need to support more than one instance of require in a page, and am running into two issues making it happen. I am working on a service which supplies embeddable interactive objects to external client pages. The top design criteria are being easily embeddable, making as few assumptions about the client environment as possible, and playing nicely in the js/css world of the client page. Clients add a script tag to their page to load the loader, and then they use an inline script to load the content they want:

<script src="http://server.net/loader"></script> 
<script>               
       special_require(["loader"], function(loader) {
           loader.load({
               object: "objectname",
               target: "#where-i-want-it"
               // other config settings
           })
       })
   </script>

The loader runs the require.js source within an anonymous function, configures it, and then exports require and define as namespaced global variables (let's call them special_require and special_define). Then several modules are special_defined, concluding with "loader":

// Using strategy 2 from http://requirejs.org/docs/faq-advanced.html#rename to 
// namespace require so it doesn't conflict with code on client sites.
;(function() {
    // Here, we use Jinja to drop in require.js, which will define itself in 
    // this non-global namespace.
    {% include 'loader/require.js' %}

    require.config({
        ...
    })
    window.special_require = require
    window.special_define = define
})()

special_define("loader", [...], function(...) { ... })

For the most part, this works really well. I'm able to keep my require completely separate from any requiring going on in the client page and I tread lightly on the client's js global namespace. But:

  1. If the client page happens to be loading require and invoking it with a data-main attribute, my require shows up and tries to load their data-main script against my baseUrl and we get a load error. I can modify the source of my require so it stops looking for the data-main attribute. Is there a cleaner solution?

  2. The require community is very clear that there should not be more than one instance of require on a page. The require.js source goes out of its way to avoid duplicating itself. So I'm nervous that I'm setting myself up for trouble down the line by going this path. That said, I'm even more nervous about possibly using a client's instance of require (with my own loading context). Require 1.2, 2.0, and 2.1 are incompatible and I wouldn't know what I was working with. Am I just in an unusual situation where it makes sense to have separate requires running? Am I headed for trouble? Is there a way to load require.js and allow it to defer to an existing require when possible, while still having some assurance that I've got a particular version of require?

like image 393
cproctor Avatar asked Jan 17 '13 19:01

cproctor


1 Answers

I think it can. See here for an example: http://requirejs.org/docs/api.html#multiversion

like image 118
Todd Avatar answered Oct 09 '22 10:10

Todd