2
votes

I have a file arrangement for my require.js based project like this:

  • lib folder: a few libraries
  • app.js : this is added as data-main in the html
  • main.js : this is the main application file

In app.js, there is a requirejs.config and a require call to load all libraries, plus the main.js (which will require some other modules that are my own scripts). This looks something like this:

require(['lib/jquery/jquery-1.8.2.min'],

    function() {

        require(['main']);
    }
);

So there are a few AMD incompatible libraries (just jquery here) that are loaded first into the global space and then the main.js is invoked (with all its dependencies). This works fine, but now I tried to make a build with require.js's optimizer and I have this issue: If I make a build: "node r.js -o build.js" (build.js just selects the app.js as input) the main.js and all the dependencies of it are not uglified and built into this the result file they remain the same way.

Now if I add "main" at the end of the list of the libraries that will be uglified nicely with all it's dependencies into the output file. I suppose the dependency is fulfilled because main.js is in the last place, but the problem is that it seems that if I run the normal, unuglified and unoptimized version of the code (that I write) because it loads the libraries simultaneously sometimes the main would get loaded first and so the dependency is not fulfilled.

Seems I would have to have to versions of app one for dev and one for building? But I'm sure there's a better way. I'm open to rearrange my files to any other structure if it makes more sense, but this was the way I saw it in the require js official sample codes as well..

1

1 Answers

0
votes

Sounds like main.js should be your data-main script, and you should define jquery as a dependency in main.js. e.g. your main.js could look like:

require.config({
  shim: {
    'jquery': {
      exports: '$'
    }
  },
  paths: {
    'jquery': 'lib/jquery/jquery-1.8.2.min'
  }
});
define([
  'jquery'
  //more libraries here
], function($) {
  //main code here
});