title: Compiled TypeScript to a bundle.. now what?
body: <p>When using Typescript <code>--outFile</code>, or with a build tool like brunch I get a transpiled and concatenated JavaScript file with all of my modules in it.</p>
  
  <p>Something like:</p>
  
  <pre><code>(function() {
    'use strict';
  
    var globals = typeof window === 'undefined' ? global : window;
    if (typeof globals.require === 'function') return;
  
    var modules = {};
    var cache = {};
    var aliases = {};
    var has = ({}).hasOwnProperty;
  
    var expRe = /^\.\.?(\/|$)/;
    var expand = function(root, name) {
      var results = [], part;
      var parts = (expRe.test(name) ? root + '/' + name : name).split('/');
      for (var i = 0, length = parts.length; i &lt; length; i++) {
        part = parts[i];
        if (part === '..') {
          results.pop();
        } else if (part !== '.' &amp;&amp; part !== '') {
          results.push(part);
        }
      }
      return results.join('/');
    };
  
    var dirname = function(path) {
      return path.split('/').slice(0, -1).join('/');
    };
  
    var localRequire = function(path) {
      return function expanded(name) {
        var absolute = expand(dirname(path), name);
        return globals.require(absolute, path);
      };
    };
  
    var initModule = function(name, definition) {
      var module = {id: name, exports: {}};
      cache[name] = module;
      definition(module.exports, localRequire(name), module);
      return module.exports;
    };
  
    var expandAlias = function(name) {
      return aliases[name] ? expandAlias(aliases[name]) : name;
    };
  
    var require = function(name, loaderPath) {
      if (loaderPath == null) loaderPath = '/';
      var path = expandAlias(name);
  
      if (has.call(cache, path)) return cache[path].exports;
      if (has.call(modules, path)) return initModule(path, modules[path]);
  
      throw new Error('Cannot find module "' + name + '" from ' + '"' + loaderPath + '"');
    };
  
    require.alias = function(from, to) {
      aliases[to] = from;
    };
  
    require.reset = function() {
      modules = {};
      cache = {};
      aliases = {};
    };
  
    var extRe = /\.[^.\/]+$/;
    var indexRe = /\/index(\.[^\/]+)?$/;
    var addExtensions = function(bundle) {
      var alias = bundle;
      while (extRe.test(alias)) {
        alias = alias.replace(extRe, '');
        if (!has.call(aliases, alias) || aliases[alias].replace(extRe, '') === alias + '/index' || bundle === alias + '.js') {
          aliases[alias] = bundle;
        }
      }
  
      if (indexRe.test(bundle)) {
        var iAlias = bundle.replace(indexRe, '');
        if (!has.call(aliases, iAlias)) {
          aliases[iAlias] = bundle;
        }
      }
    };
  
    require.register = require.define = function(bundle, fn) {
      if (typeof bundle === 'object') {
        for (var key in bundle) {
          if (has.call(bundle, key)) {
            require.register(key, bundle[key]);
          }
        }
      } else {
        modules[bundle] = fn;
        delete cache[bundle];
        addExtensions(bundle);
      }
    };
  
    require.list = function() {
      var result = [];
      for (var item in modules) {
        if (has.call(modules, item)) {
          result.push(item);
        }
      }
      return result;
    };
  
    require.brunch = true;
    require._cache = cache;
    globals.require = require;
  })();
  require.register("scripts/main.ts", function(exports, require, module) {
  System.register(['./ranger'], function(exports_1, context_1) {
      "use strict";
      var __moduleName = context_1 &amp;&amp; context_1.id;
      var ranger_1;
      return {
          setters:[
              function (ranger_1_1) {
                  ranger_1 = ranger_1_1;
              }],
          execute: function() {
              console.log(ranger_1.default.name);
          }
      }
  });
  //# sourceMappingURL=main.js.map
  });
  
  ;require.register("scripts/ranger.ts", function(exports, require, module) {
  System.register([], function(exports_1, context_1) {
      "use strict";
      var __moduleName = context_1 &amp;&amp; context_1.id;
      return {
          setters:[],
          execute: function() {
              exports_1("default",{
                  name: 'I am a ranger!'
              });
          }
      }
  });
  //# sourceMappingURL=ranger.js.map
  });
  
  ;
  //# sourceMappingURL=app.js.map
  </code></pre>
  
  <p>Now.. how am I supposed to use this? I've compiled everything here with SystemJS but I could use commonjs or amd too. I tried using System.JS and importing something.. but that is the wall I run into. The modules have all already been imported. I just need to select one (say a main entry module) and execute it. I've read things about these tools (might?) include "micro-loaders" to do just this, but haven't found any examples that show how they are actually used.</p>