I have been developing a new JavaScript application which is rapidly growing in size.

My entire JavaScript Application has been encapsulated inside a single function, in a single file, in a way like this:

(function(){  
   var uniqueApplication = window.uniqueApplication = function(opts){
      if (opts.featureOne)
      {
         this.featureOne = new featureOne(opts.featureOne);
      }
      if (opts.featureTwo)
      {
         this.featureTwo = new featureTwo(opts.featureTwo);
      }
      if (opts.featureThree)
      {
         this.featureThree = new featureThree(opts.featureThree);
      }
   };

   var featureOne = function(options)
   {
       this.options = options;
   };
   featureOne.prototype.myFeatureBehavior = function()
   {
       //Lots of Behaviors
   };

   var featureTwo = function(options)
   {
       this.options = options;
   };
   featureTwo.prototype.myFeatureBehavior = function()
   {
       //Lots of Behaviors
   };

   var featureThree = function(options)
   {
       this.options = options;
   };
   featureThree.prototype.myFeatureBehavior = function()
   {
       //Lots of Behaviors
   };
})();

In the same file after the anonymous function and execution I do something like this:

(function(){
   var instanceOfApplication = new uniqueApplication({
       featureOne:"dataSource",
       featureTwo:"drawingCanvas",
       featureThree:3540
   });
 })();

Before uploading this software online I pass my JavaScript file, and all it's dependencies, into Google Closure Compiler, using just the default Compression, and then I have one nice JavaScript file ready to go online for production.

This technique has worked marvelously for me - as it has created only one global footprint in the DOM and has given me a very flexible framework to grow each additional feature of the application. However - I am reaching the point where I'd really rather not keep this entire application inside one JavaScript file.

I'd like to move from having one large uniqueApplication.js file during development to having a separate file for each feature in the application, featureOne.js - featureTwo.js - featureThree.js

Once I have completed offline development testing, I would then like to use something, perhaps Google Closure Compiler, to combine all of these files together - however I want these files to all be compiled inside of that scope, as they are when I have them inside one file - and I would like for them to remain in the same scope during offline testing too.

I see that Google Closure Compiler supports an argument for passing in modules but I haven't really been able to find a whole lot of information on doing something like this.

Anybody have any idea how this could be accomplished - or any suggestions on a development practice for writing a single JavaScript Library across multiple files that still only leaves one footprint on the DOM?