2016-07-30 11 views
1

Ich kompiliere mein TypeScript-Projekt in eine einzige JS-Datei, indem ich im Moment eine outFile in den Compileroptionen festlege. In meinem Projekt ist jede Klasse in einer anderen Datei definiert.TypeScript Kompilierreihenfolge in einzelne Datei

Das Problem ist, dass Klassen, die voneinander abhängen, in der Ausgabe JS in der richtigen Reihenfolge nicht verkettet sind.

Zum Beispiel, wenn ich die Klasse A, die Klasse B erstreckt, würde es Klasse B bedeuten würde, hat vor der Klasse A. kompiliert werden

(1)

class A extends B { } //error - can't find B 

class B { } 

(2)

Das Problem ist die Dateireihenfolge in TypeScript Compile ist nicht nach Klassenabhängigkeiten definiert, was zu vielen Instanzen von (1).

Es kann durch die manuelle Definition der Kompilierung, um mit vielen Zeilen gelöst werden:

/// <reference path="myFile.ts"/> 

jedoch ist es nicht ideal und Kopfschmerzen in großen Projekten schnell werden kann.

Die andere Option von dem, was ich lese, ist die Verwendung von externen Modulen und in der Lage, relevante Klassen/Dateien zu verlangen/zu importieren.

Es klingt gut, aber es scheint nur ASYNC Laden während Laufzeit der erforderlichen Dateien zu kümmern, nachdem jede ts-Datei in eine eigene js-Datei kompiliert wurde.

Was ich brauche, ist die richtige Kompilierreihenfolge nach Klassenabhängigkeiten während kompilieren Zeit von TS zu js.

Ich googeln „Typoskript kompilieren Ordnung“ und gründlich die ersten 10 Ergebnisse lesen - Bedeutung folgende Hinweise auf turoials, Dokumentationen, Videos, etc ...

Es scheint, die Menschen das gleiche Problem, aber ihre Fragen erlebt haben haben wurde nie zur Zufriedenheit beantwortet.

Von dem, was ich verstehe, sollte es möglich sein, mit dem externen CommonJS-Modul zu tun, aber alles, was ich aus den Antworten verstehen kann, ist ein allgemeiner Sinn dessen, was passieren sollte, anstatt eine einfache und direkte Antwort, wie man es tatsächlich macht .

Wenn Sie die Antwort wissen, lassen Sie uns dieses Problem zu lösen, ein für alle Mal :)

+0

Wenn Sie das alles in einer einzigen js Datei kompilieren wollen, dann würde ich nicht Module verwenden, aber in diesem Fall sollten Sie mit Referenzen sein, und ich denke auch, dass die Referenzen in großen Projekten helfen, wie sie die Beziehungen darstellt zwischen den verschiedenen Dateien (wenn es viele Dateien gibt, kann es sonst nicht unordentlich werden). Es ist nicht anders als in anderen Sprachen. Haben Sie versucht, die zu kompilierenden Dateien mit der 'files' -Eigenschaft in [tsconfig.json] (https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) zu spezifizieren? –

+0

Die Angabe der Dateien würde nur bedeuten, die Kompilierreihenfolge manuell anders einzustellen, korrigiere mich, wenn ich falsch liege. Nach einem zweiten Blick auf die Verwendung von Referenzen, ist es in der Tat ähnlich wie es in anderen Sprachen gemacht wird. Gibt es vielleicht einen subtileren Ausdruck als pfadbasierte Referenzen mit einem umständlichen Tag? Ähnliches gilt für den Import mit paketbasierten Pfaden? d. H. Etwas wie "importieren Utils.Mathutils;" anstelle von "/// " –

+0

Sie können importieren (was ähnlich ist, was Sie fragen), aber das ist mit Modulen und es macht weniger Sinn in dein Fall. Ich stimme zu, dass die Referenzen nicht sehr komfortabel sind, aber das ist wahrscheinlich alles, was Sie haben. –

Antwort

2

Es mit Typoskript ist kein Problem, aber mit ECMAScript: Klassen sind nicht gehisst.

Siehe das Buch von Dr. Axel Rauschmayer:

Function declarations are hoisted: When entering a scope, the functions that are declared in it are immediately available – independently of where the declarations happen. That means that you can call a function that is declared later:

foo(); // works, because `foo` is hoisted 

function foo() {} 

In contrast, class declarations are not hoisted. Therefore, a class only > exists after execution reached its definition and it was evaluated. Accessing it beforehand leads to a ReferenceError:

new Foo(); // ReferenceError 

class Foo {} 

Sie müssen den Auftrag kümmern.

... oder einen Bundler (Webpack) oder einen Loader (SystemJS) mit ES6-Modulen verwenden.

+0

Ja, mir ist bewusst, warum es passiert. Bei dieser Frage wird das Typoskript in der richtigen Reihenfolge kompiliert, damit die Klassen ausgewertet werden, bevor sie benötigt werden. –

+0

@RoyiBerndhal Ich empfehle dringend, [ES6-Module] (https://hacks.mozilla.org/2015/08/es6-in-depth-modules/) zu verwenden, zum Beispiel [mit Webpack] (http: // www .jbrautly.com/es6-modules-with-typescript-and-webpack /). – Paleo

0

Es ist sicher zu sagen, dass es keine One-Way- gibt, dies zu tun. Aber ich rate Ihnen, auf das sicherste und anspruchsvollste Build/Bundling-Setup zu setzen, das Sie bekommen können. Berücksichtigen Sie je nach Umfang Ihres Projekts die folgenden Punkte.

Sie können eine Sortierreihenfolge für Ihre Ausgabe manuell definieren. Wird es skalieren? Nr. Hunderte von Dateien zu sortieren und bedingte oder zirkuläre Abhängigkeiten aufzulösen kann ein echter Schmerz sein, und übrigens auch falsch.

Sie können sich bei Verwendung der Option aus auf Referenztags und die Reihenfolge des Compilers verlassen. Ich denke an diese die schlechteste Lösung für das Ziel. Bei einer bestimmten Projektgröße und unter der Annahme, dass es eine angemessene Menge an nicht perfektem Softwaredesign gibt, könnte es zu einer nicht-deterministischen Ausgabeordnung und Null-Warnung oder Schutz vor Abhängigkeitsproblemen kommen.

Deshalb habe ich folgendes empfehlen:

  • Verwendung Import/Export Ihre Abhängigkeiten zu erzwingen, werden Sie Module kompiliert haben, und Sie werden einen Lader/Bündler, ja
  • vermeiden Kreis brauchen Abhängigkeiten, verwenden Sie die Abhängigkeit Grafik oder Werkzeuge wie madge, um sie zu finden
  • Verwenden Sie einen Lader und einen angenehmen Workflow, um Ihre dist-Dateien zu erstellen (wir verwenden gulp/browserify/tsify/concat/...) - das Herzstück ist etwa 20 Zeilen Code

Wird Ihr Projekt winzig sein? 20 Dateien? 50? Wählen Sie eine aus. Ist Ihr Projekt groß genug? Module ist es. Genießen Sie mehrere Vorteile wie Slicker Knotenmodule bündeln oder weniger für Namensabstand benötigen.

Verwandte Themen