title: Angular2 SystemJs Bundles and Non Bundled js
body: <p>I'm new to SystemJs and Angular2. I am using 3rd party packages, some of which have <code>bundles/code.js</code> files and some do not.</p>
  <p>The ones that are using <code>bundles/code.js</code> I have managed to get working.</p>
  <p>I include <code>&lt;script src=foo/bundles/code.js&gt;</code> and am then able to <code>import * from 'code/foo'</code> inside my <code>ts</code> files.</p>
  <p>This all makes sense to me as the <code>bundles/code.js</code> has something like <code>System.registerDynamic(&quot;code/foo&quot;,...)</code> and so the <code>import</code> knows what <code>code/foo</code> is (This is my understanding of it)</p>
  <p>I have come across a package that does not use bundles. The <code>.js</code> file I need to load looks like this:</p>
  <pre><code>// ./vendor/ng2-file-upload/ng2-file-upload.js
  
  function __export(m) {
      for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
  }
  __export(require('./components/file-upload/file-select'));
  __export(require('./components/file-upload/file-drop'));
  __export(require('./components/file-upload/file-uploader'));
  var file_select_2 = require('./components/file-upload/file-select');
  var file_drop_2 = require('./components/file-upload/file-drop');
  exports.FILE_UPLOAD_DIRECTIVES = [file_select_2.FileSelect, file_drop_2.FileDrop];
  //# sourceMappingURL=ng2-file-upload.js.map
  </code></pre>
  <p>I realize this is not in <code>System</code> format. I have tried the following in my <code>index.html</code>:</p>
  <pre><code>System.config({
      packages: {
          'js': {
              format: 'register',
              defaultExtension: 'js'
          }
      },
      meta: {
         'vendor/ng2-file-upload/ng2-file-upload.js' : {
              format: 'cjs', // I have also tried 'amd' and 'global'
              defaultExtension: 'js'
         }
      }
  });
  </code></pre>
  <p>I have also tried</p>
  <pre><code>System.config({
      packages: {
          'js': {
              format: 'register',
              defaultExtension: 'js'
          },
         'vendor/ng2-file-upload/ng2-file-upload.js' : {
              format: 'cjs', // I have also tried 'amd' and 'global'
              defaultExtension: 'js'
         }
      }
  });
  </code></pre>
  <p>No matter what I do I end up with the following error:</p>
  <p>Uncaught ReferenceError: require is not defined</p>
  <h3>I have 2 questions:</h3>
  <ul>
  <li>How do I load <code>ng2-file-upload.js</code>?</li>
  <li>How would I go about creating a <code>bundle</code> for this package? (The package contains all <code>.ts</code> and <code>.d.ts</code> files when running <code>npm install</code>)</li>
  </ul>