title: Preserving jQuery dependency for highcharts with requireJS optimizer
body: <p>I'm testing out requireJS and am trying to make a simple project using highcharts.  I've started with the <a href="https://github.com/requirejs/example-multipage" rel="nofollow">requireJS multipage example project</a> as a starting point.</p>
  
  <p>My dir structure looks the same as the base structure, with highstock.js added in the lib directory.</p>
  
  <ul>
  <li><strong>page1.html</strong>: page 1 of the app.</li>
  <li><strong>page2.html</strong>: page 2 of the app.</li>
  <li><strong>js</strong>
  <ul>
  <li><strong>app</strong>: the directory to store app-specific modules.</li>
  <li><strong>lib</strong>: the directory to hold third party modules, like jQuery.</li>
  <li><strong>common.js</strong>: contains the requirejs config, and it will be the build
  target for the set of common modules.</li>
  <li><strong>page1.js</strong>: used for the data-main for page1.html. Loads the common
  module, then loads <strong>app/main1</strong>, the main module for page 1.</li>
  <li><strong>page2.js</strong>: used for the data-main for page2.html. Loads the common
  module, then loads <strong>app/main2</strong>, the main module for page 2.</li>
  </ul></li>
  </ul>
  
  <p>common.js holds the configuration and I've added a shim for highstock there:</p>
  
  <pre><code>requirejs.config({
      baseUrl: 'js/lib',
      paths: {
          app: '../app'
      },
      shim: {
          "highstock": {
              "exports": "Highcharts",
              "deps": [ "jquery"] 
          },
      } // end Shim Configuration
    } );
  </code></pre>
  
  <p>I also am using the base build file, with the addition of a line to set common.js as the config file and another to disable minifying.</p>
  
  <pre><code>optimize: "none",
  mainConfigFile: '../www/js/common.js',
  </code></pre>
  
  <p>In apps/main1.js I've added a <code>var HighCharts= require('highstock');</code> and I then try to use it.</p>
  
  <p>When I run this in the normal build everything works fine.  All the dependencies hold and everything loads.</p>
  
  <p>When I attempt to optimize my build, highcharts doesn't receive the jQuery dependency.  I think I see why its happening, but I'm not sure how to fix it.</p>
  
  <p>My build creates 3 files, common.js, page1.js, and page2.js.  </p>
  
  <p>The relevant parts of the build output:</p>
  
  <pre><code>js/lib/../common.js
  ----------------
  js/lib/../common.js
  js/lib/jquery.js
  ...
  
  js/lib/../page1.js
  ----------------
  js/lib/../page1.js
  js/lib/highstock.js
  js/app/main1.js
  ...
  </code></pre>
  
  <p>My page then references the built page1.  When it attempts to load the highstock module it errors out since jQuery has not yet been loaded/isn't accessible.</p>
  
  <p>When I see the built page1 I can see why.</p>
  
  <pre><code>require(['./common'], function (common) {
      require(['app/main1']); //highcharts is in main1 in the non-optimized version
  });
  
  define("../page1", function(){});
  //a few more defines
  
  (function () { // start highcharts module definition HERE
  </code></pre>
  
  <p>So instead of being defined in the callback after common (including jQuery) has been loaded, its loaded after making the request, but before the callback executes.</p>
  
  <p>My question is, why is this happening there instead of inside the callback (which is where it is loaded in the non-optimized version).  I've tried multiple options in the build.js file and config file and I seem to be missing some key concept or small error.  </p>
  
  <p>Sorry for the super long question but I felt all the info was necessary.  If more info is needed I can post it, or get rid of something superfluous.</p>