Transpile typescript for use in browser
<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>