title: How can I easily maintain a cross-file JavaScript Library Development Environment
body: <p>I have been developing a new JavaScript application which is rapidly growing in size.  </p>
  
  <p>My entire JavaScript Application has been encapsulated inside a single function, in a single file, in a way like this:</p>
  
  <pre><code>(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
     };
  })();
  </code></pre>
  
  <p>In the same file after the anonymous function and execution I do something like this:</p>
  
  <pre><code>(function(){
     var instanceOfApplication = new uniqueApplication({
         featureOne:"dataSource",
         featureTwo:"drawingCanvas",
         featureThree:3540
     });
   })();
  </code></pre>
  
  <p>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.</p>
  
  <p>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.  </p>
  
  <p>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</p>
  
  <p>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.</p>
  
  <p>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.  </p>
  
  <p>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?</p>