2016-07-18 20 views
1

Ich übersetze mein TypeScript mit "-m umd", weil mein Projekt Server, Client und gemeinsamen Code enthält. Der clientseitige Code funktioniert jedoch nicht im Browser. Der Browser zeigt nicht einmal einen Fehler an und der von mir gefundene Breakpoint traf nicht, also musste ich js-ts Mapping entfernen. Dann konnte ich es debuggen und ich fand das Problem.TypScript UMD sowohl 'Modul' als auch 'definieren' sind undefiniert

Es folgt der Code, der UMD erzeugt:

(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", "./model"], factory); 
    } 
})(function (require, exports) { 
    //my code 
}); 

Es funktioniert nicht, da beide ‚Modul‘ und ‚definieren‘ sind nicht definiert. Daher wird mein Code nicht ausgeführt und es gibt nicht einmal eine Ausnahme.

Was ist los? Wie könnte ich es zum Laufen bringen?

+2

Sie müssen einen Modullader verwenden. –

+0

@Tamas Hegedus wie SystemJS? Daher muss ich in diesem Fall keine UMD verwenden. Ich dachte, UMD sollte mir dieses Problem lösen. – Alon

+1

UMD vereinheitlicht AMD und CommonJS-Module, so dass Sie diese Module mit beiden verwenden können. SystemJS vereinheitlicht auch AMD und CommonJS, so dass beide geladen werden können. Der einzige Weg, um das Problem zu lösen, ist die Verwendung von reinen es6-Modulen und die Bündelung mit Rollupjs. Ich weiß nicht, ob Typoskript hat ein Rollup wie Bundler in –

Antwort

3

Heute versteht keiner der Browser AMD-Module nativ. (In der Tat keine der Modulformate außer Standard ES6 in einigen wirklich neuen Builds von MS Edge).

Sie müssen also einen Modullader mit Ihrem Code bündeln. Ich schlage vor, dass Sie entweder nur AMD-Module und einen leichten AMD-Lader verwenden, Ihre Module und den Modullader in einer einzigen Datei verketten oder RollupJS verwenden, das ein loaderloses Paket aus Standard-ES6-Modulen generiert. Wenn ich mich richtig erinnere, funktioniert das rollup-plugin-typescript Plugin nicht gut mit mehreren Dateien, also empfehle ich, Typoskript mit tsc in es6 Module zu kompilieren und es mit Rollupjs in einem zweiten Schritt zu bündeln.

Sie können mehr über Modul Bündler in diesem Stackoverflow Thread gelesen: Do I need require js when I use babel?

EDIT

Heute (September 2016) das rollup-plugin-typescript Plugin funktioniert wie ein Zauber! Definitiv ist dies der empfohlene Weg jetzt.