title: Transpile typescript for use in browser
body: <p>I am trying to write my frontend code in Typescript and want to export the code, that my browser can load in
  <code>&lt;script src="..."&gt;&lt;/script&gt;</code>.</p>
  
  <p>I did so by way of browserify and tsify. My trouble is that not on my code is accessible in the global namespace. Loading the script in a <code>&lt;script&gt;</code> tag will execute it, sure, but what if I intend it to be loaded like a library of functions that can be used in inline <code>&lt;script&gt;</code>s or similar?</p>
  
  <p><strong>Update</strong></p>
  
  <p>An example would be</p>
  
  <p><em>index.ts</em></p>
  
  <pre><code>function foo(): void {
      console.log("bar");
  }
  </code></pre>
  
  <p>Compiling with the following conf produces the following javascript</p>
  
  <p><em>tsconfig.json</em></p>
  
  <pre><code>{
      "compilerOptions": {
          "module": "UMD",
          "target": "es5",
          "noImplicitAny": true,
          "removeComments": true,
          "preserveConstEnums": true,
          "sourceMap": true
      }
  }
  </code></pre>
  
  <p><em>index.js</em></p>
  
  <pre><code>function foo() {
      console.log("bar");
  }
  </code></pre>
  
  <p>This is fine. However, if index.js imports something, e.g. my <code>notification</code> function, then I get this</p>
  
  <pre><code>(function (factory) {
      if (typeof module === 'object' &amp;&amp; typeof module.exports === 'object') {
          var v = factory(require, exports); if (v !== undefined) module.exports = v;
      }
      else if (typeof define === 'function' &amp;&amp; define.amd) {
          define(["require", "exports", "./notifications"], factory);
      }
  })(function (require, exports) {
      "use strict";
      var notifications_1 = require("./notifications");
      notifications_1.notification("blerp");
      function foo() {
          console.log("bar");
      }
  });
  </code></pre>
  
  <p>Now <code>foo</code> is wrapped in some scope, and is not available when I load it on my website: <code>&lt;script src="require.js" data-main="index"&gt;&lt;/script&gt;</code></p>
  
  <pre><code>foo is undefined
  </code></pre>