title: Custom Javascript app for comsumption with require.js: How to avoid conflicts with existing libs on optimization?
body: <p>I'm trying to figure out a pattern to load concrete versions of common libraries like Backbone, jQuery and Underscore to use them in any Javascript application designed to be plugged in any website without being in conflict with existing versions of those libraries. My lib of choice to make my code <em>modular</em> is require.js.</p>
  
  <p>The app will be called Bobby :-)</p>
  
  <p>My code is working if I don't <em>optimize</em> it to a single file. It would be nice to serve Bobby as a single Javascript file that can be included anywhere in the HTML code of the site.</p>
  
  <p>I notice it: I'm a novice with require.js.</p>
  
  <h1>Directory Structure</h1>
  
  <p>The files are organized like this:</p>
  
  <pre><code>bobby
    public
      js
        app -&gt; My custom JS
          bobby.js
          core.js
  
        lib -&gt; 3rd party JS
          backbone.js
          jquery-1.9.1-min.js
          require.js
          underscore.js
  
        bootstrap.js -&gt; Main file for require.js
        build.js -&gt; To create js/bobby.js
  
      index.html -&gt; uses non-optimized version
      index2.html -&gt; uses optimized version (js/bobby.js)
  </code></pre>
  
  <h1>The HTML files</h1>
  
  <h2>index.html</h2>
  
  <p>Here I'm trying to be sure that the site's libraries are not overriden with my own versions.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Bobby&lt;/title&gt;
    &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"&gt;&lt;/script&gt;
  
    &lt;script type="text/javascript" src="js/lib/require.js" data-main="js/bootstrap.js"&gt;&lt;/script&gt;
  
    &lt;script type="text/javascript"&gt;
    jQuery(function($){
      console.log("Host's jQuery: " + $.fn.jquery); // Should be 1.7.2
      console.log("Host's Underscore: " + _.VERSION); // Should be 1.4.3
      console.log("Host's Backbone: " + Backbone.VERSION); // Should be 0.9.10
      console.log("Host's Backbone's jQuery: " + Backbone.$.fn.jquery);
    });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;HOLA!&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I load this file the console logs are correct:</p>
  
  <pre><code>Host's jQuery: 1.7.2 index.html:23
  Host's Underscore: 1.4.3 index.html:24
  Host's Backbone: 0.9.10 index.html:25
  Host's Backbone's jQuery: 1.7.2 index.html:26
  Bobby's jQuery: 1.9.1 bobby.js:3
  Bobby's Underscore: 1.4.4 bobby.js:4
  Bobby's Backbone: 1.0.0 bobby.js:5
  </code></pre>
  
  <h2>index2.html</h2>
  
  <p>This is the problematic version. This file uses an <em>optimized</em> version. Instead of:</p>
  
  <pre><code>&lt;script type="text/javascript" src="js/lib/require.js" data-main="js/bootstrap.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>It uses:</p>
  
  <pre><code>&lt;script type="text/javascript" src="js/bobby.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And the console logs are incorrect:</p>
  
  <pre><code>Host's jQuery: 1.9.1 index2.html:14
  Host's Underscore: 1.4.4 index2.html:15
  Host's Backbone: 1.0.0 index2.html:16
  Host's Backbone's jQuery: 1.9.1 index2.html:17
  Bobby's jQuery: 1.9.1 bobby.js:11
  Bobby's Underscore: 1.4.4 bobby.js:11
  Bobby's Backbone: 1.0.0 bobby.js:11
  </code></pre>
  
  <p>but if you execute this in the console:</p>
  
  <pre><code>$.fn.jquery =&gt; "1.7.2"
  bobby.$.fn.jquery =&gt; "1.9.1"
  </code></pre>
  
  <p>it is OK. The same with:</p>
  
  <pre><code>Backbone.VERSION =&gt; "0.9.10"
  bobby.B.VERSION =&gt; "1.0.0"
  </code></pre>
  
  <p>and:</p>
  
  <pre><code>_.VERSION =&gt; "1.4.3"
  bobby._.VERSION =&gt; "1.4.4"
  </code></pre>
  
  <p>It fails only with the script executed right after the js/bobby.js one is included. That script is using the incorrect versions of the libraries (external instead of site ones).</p>
  
  <h1>The JS files</h1>
  
  <h2>bootstrap.js</h2>
  
  <p>It is supposed that this is what is first loaded so I call noConflict() here for all my 3rd party libraries.</p>
  
  <pre><code>require(['app/core', 'app/bobby'], function(core, bobby) {
      core._.noConflict();
      core.$.noConflict(true);
      core.B.noConflict();
  
      bobby.initialize();
  });
  </code></pre>
  
  <h2>app/core.js</h2>
  
  <pre><code>define(['lib/underscore', 'lib/jquery-1.9.1.min', 'lib/backbone'], function(){
      Backbone.$ = jQuery;
      return {
          _: _,
          $: jQuery,
          B: Backbone
      };
  });
  </code></pre>
  
  <h2>app/bobby.js</h2>
  
  <pre><code>define(['app/core'], function(core){
      var initialize = function() {
          console.log("Bobby's jQuery: " + core.$.fn.jquery);
          console.log("Bobby's Underscore: " + core._.VERSION);
          console.log("Bobby's Backbone: " + core.B.VERSION);
  
          core.$('body').html('Bobby initialized!');
  
          window.bobby = core._.extend(window.bobby || {options: {}}, core);
      };
  
      return {
          'initialize': initialize
      };
  });
  </code></pre>
  
  <h1>The optimized version</h1>
  
  <p>I use r.js installed globally via npm and a build.js file:</p>
  
  <pre><code>cd bobby/public/js
  r.js -o build.js
  </code></pre>
  
  <p>And it gives:</p>
  
  <pre><code>Tracing dependencies for: /path/to/bobby/public/js/bobby.js
  Uglifying file: /path/to/bobby/public/js/bobby.js
  
  /path/to/bobby/public/js/bobby.js
  ----------------
  /path/to/bobby/public/js/lib/require.js
  /path/to/bobby/public/js/lib/underscore.js
  /path/to/bobby/public/js/lib/jquery-1.9.1.min.js
  /path/to/bobby/public/js/lib/backbone.js
  /path/to/bobby/public/js/app/core.js
  /path/to/bobby/public/js/app/bobby.js
  /path/to/bobby/public/js/bootstrap.js
  </code></pre>
  
  <h2>build.js</h2>
  
  <p>To avoid conflicts with an existing require.js library I've included it namespaced inside <em>bob</em>.</p>
  
  <pre><code>({
      baseUrl: ".",
      out: "bobby.js",
      paths: {
          requireLib: 'lib/require'
      },
      include: ["requireLib", "bootstrap"],
      namespace: "bob"
  })
  </code></pre>
  
  <h1>Help needed</h1>
  
  <p>Although bobby.js works well after is initialized and it returns the globals to the original libraries, it doesn't work when we execute:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jQuery(function($){
    ...
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>just after loading the optimized bobby.js file.</p>
  
  <p>The idea is not to force the owner of the site to put the bobby.js file in a concrete place.</p>
  
  <p>What can I do? Thanks!</p>
  
  <p>P.D.: Feel free to use this pattern if you find it useful...</p>