Ich versuche, von .ts zu .min.js wie folgt zu kompilieren:
Vorher habe ich nur folgendes gemacht und alles hat gut funktioniert:
%Vor%Ich möchte Quellkarten verwenden können. Mein tsconfig.json ist folgender:
%Vor% Seit ich "target": "es6" hinzugefügt habe, bekomme ich den Fehler:
Die Dokumentation zu zysify sagt:
Dieser Fehler tritt auf, wenn eine TypeScript-Datei nicht in JavaScript kompiliert wird, bevor sie über den Browserify-Bundler ausgeführt wird. Es gibt ein paar bekannte Gründe, auf die Sie stoßen könnten.
Aber in meinen Gulp-Aufgaben im Laufen tsify vor babelify:
%Vor%Ich habe gerade die ES6-Kompilierung hinzugefügt, bevor ich TS in ES5 kompiliert habe und alles hat funktioniert (einschließlich Quellkarten).
Ich weiß nicht, was falsch ist. Hast du eine Idee? Vielen Dank im Voraus!
Es scheint, dass es ein Problem mit browserify und seiner Auflösung von symbolisierten Transformationen gab. Allerdings dieses Commit , das die > fs.realpathSync Methode, die den kanonischen absoluten Pfadnamen zurückgibt, sollte das Problem behoben sein. Und es wurde definitiv in der 10.2.5 version von node-browserify gelandet.
Wie erwähnt von James, wenn Sie nicht auf eine neuere Version aktualisieren können, können Sie seine Antwort mit% auschecken co_de%, das das gleiche Problem behebt .
Wie Schluck und Bräuarbeit zusammen arbeiten, ist ziemlich interessant, da es eines der wenigen Werkzeuge ist, um tatsächlich kein zugehöriges Schluckplugin zu benötigen (was sogar auf die schwarze Liste gesetzt , um Benutzer zu zwingen, das browserify-Paket direkt zu verwenden. Der Grund, warum es nicht benötigt wird, ist aufgrund der Tatsache, dass @substack , insbesondere bekannt als der Schöpfer von browserify und Tape, ziemlich kenntnisreich ist ( und ich nehme an, mag) die Verwendung von Knoten-Streams, die er in diesen beiden Projekten verwendet. Angesichts dieser Prämisse und der Tatsache, dass 99% der gulp-Plugins nur das Tool verwenden, das sie mit Streams verwenden möchten, ist ein gulp-Plugin unnötig, da browserify bereits Streams verwendet, die Sie in Ihrer Aufgabe zurückgeben können.
Kleine Randnotiz, er hat auch ein Handbuch über Streams in Node geschrieben, das es wert ist, es auszuprobieren, wenn Sie wollen um mehr darüber zu verstehen, wie Schluck intern funktioniert.
Bezüglich realpathify funktioniert es genau wie jedes andere Plugin, kompiliert Typoskript-Dateien und übergibt die Ausgabe an den Stream, damit der browserify-Prozess fortgesetzt wird.
Der Grund, warum Sie den Fehler erhalten, ist in Aperçus Antwort beschrieben. Ein Update sollte das Problem beheben, wie erwähnt, aber Sie können James 'Antwort sehen, wenn Sie nicht in der Lage sind.
Gulp, Babelify und TSSify arbeiten zusammen, um Ihren Code vom TypeScript ES2015 auf ein browserkompatibles reines ES5 mit Modulen zu übertragen. Hier ist eine grundlegende Einführung zu dem, was sie sind:
Schluck - Ein Task-Runner, der Streams verwendet, damit Sie bestimmte kleinere Aufgaben gleichzeitig gruppieren und ausführen können, um die Builds effizienter und einfacher zu gestalten
Babelify - Ein Browserify-Transformer, der Ihre Dateien vor der Bündelung in pures JavaScript umwandelt und je nach Voreinstellungen und Plug-Ins mit dem Browser kompatibel ist. Babel für Browserify
TSify - Ein Browserify-Plug-in, das Ihr TypeScript in JavaScript für den Browser kompiliert
Mit Gulp können Sie beide Browserify-Plugins einrichten, um Ihre TypeScript-Dateien in einer einfachen Aufgabe in ECMAScript 2015-Dateien zu konvertieren. Anstatt gulp-browserify zu verwenden, das auf der schwarzen Liste steht, können Sie einfach das Paket browserify verwenden, da es bereits Streams verwendet, was Gulp erwartet, so dass kein zusätzliches Gulp-Plugin benötigt wird.
Nun wie sie zusammenarbeiten. Stellen Sie sich Gulp als eine Fabrik vor, die Apfelkuchen herstellt, und Ihre Gulp-Aufgaben als bestimmte Aufgaben, die Ihre Fabrik ausführt, um das Endprodukt zu kreieren: den Teig zu machen, die Füllung zu kreieren, den Kuchen zu backen usw. Füllen, ich muss beginnen mit:
Diese sind wie die bestimmten Teile der Aufgabe in Ihrer Gulp-Aufgabe. Wenn ich browserfähige JavaScript von TypeScript erstellen wollte, würde ich ähnlich:
Wenn wir dies auf den tatsächlichen Code anwenden, erhalten wir Folgendes:
browserify instance und streams, um die Eintragsdateien auszuwählen, in denen der Code transpiliert wird, und leiten Sie sie dann im Stream tsify , registrieren, das Ihre TypeScript-Dateien im Stream in ES2015 ausführt und konvertiert (falls target ES2015 ist) und dann den Stream weiterleiten babelify , wodurch das ES2015 in ein browserfreundliches ES5 mit einer bestimmten voreingestellten es2015 umgewandelt wird. Geben Sie sie dann im Stream weiter, damit die Pipeline fortgesetzt werden kann Alle Teile arbeiten zusammen, damit Sie eine Aufgabe haben, die mehrere Dinge erledigt und Ihr TypeScript schließlich in ES5 konvertiert.
Ich hatte das gleiche Problem, das durch das Vorhandensein von symbolischen Links in meinem node_modules verursacht wurde. Ich habe es behoben, indem ich das realpathify Plugin hinzugefügt habe, um es zu browserifizieren.
Tags und Links typescript babeljs source-maps gulp uglifyjs