Transpiles typescript zur Verwendung im Browser

Question

Ich versuche, meinen Frontend-Code in Typescript zu schreiben und den Code zu exportieren, den mein Browser laden kann <script src="..."></script>.

Ich habe dies über browserify und tsify getan. Mein Problem ist, dass auf meinen Code im globalen Namespace nicht zugegriffen werden kann. Laden Sie das Skript in einem <script> Tag wird es ausführen, sicher, aber was ist, wenn ich beabsichtige, es wie eine Bibliothek von Funktionen geladen werden, die inline <script> s oder ähnliches verwendet werden können?

aktualisieren

Ein Beispiel

index.ts

function foo(): void { 
    console.log("bar"); 
} 

Kompilieren mit der folgenden conf würde erzeugt das folgende JavaScript

tsconfig.json

{ 
    "compilerOptions": { 
     "module": "UMD", 
     "target": "es5", 
     "noImplicitAny": true, 
     "removeComments": true, 
     "preserveConstEnums": true, 
     "sourceMap": true 
    } 
} 

index.js

function foo() { 
    console.log("bar"); 
} 

Das ist in Ordnung. Wenn index.js jedoch etwas importiert, z. meine notification Funktion, dann bekomme ich diese

(function (factory) { 
    if (typeof module === 'object' && typeof module.exports === 'object') { 
     var v = factory(require, exports); if (v !== undefined) module.exports = v; 
    } 
    else if (typeof define === 'function' && 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"); 
    } 
}); 

Jetzt foo in einem gewissen Umfang gewickelt ist, und ist nicht verfügbar, wenn ich es auf meiner Website laden: <script src="require.js" data-main="index"></script>

foo is undefined 

Answer 1

Bis Modul-Lade landet in Browsern Als native JavaScript-Funktion können Sie eine Bibliothek wie RequireJS oder SystemJS zum Laden von Modulen verwenden.

Wenn RequireJS verwenden, übergeben Sie einfach die Compiler-Option:

-module UMD 

Und dann RequireJS an Ihrer Hauptdatei verweisen:

<script src="require.js" data-main="app"></script> 

Module dann geladen ist asynchron auf die Nachfrage und das Leben ist gut.