Website-Suche

node.js - TypeScript-Quellen automatisch kompilieren und statische (Template-)Dateien kopieren

Beim Debuggen eines Express-Servers besteht mein 'Build & Run'-Prozess aus 3 Schritten:

  • Kompilieren von TypeScript-Quellen mit tsc
  • Kopiere statische Dateien wie Bilder und Vorlagen nach dist/
  • Führen Sie die kompilierte server.js-Datei aus

Jeder dieser Schritte kann mithilfe eines Watch-Modus automatisiert werden, aber ich habe Schwierigkeiten, die drei zusammen zu kombinieren. Es ist mir gelungen, es zum Laufen zu bringen, indem ich tsc-watch verwendet habe, um die TypeScript-Quellen zu überwachen, cpx, um die statischen Dateien zu kopieren, und schließlich nodemon, um den Server neu zu starten. Dieser Ansatz funktioniert, aber es gibt ein paar Probleme:

  • cpx überwacht nur Dateien, die zum Zeitpunkt seines Starts existierten (ich glaube, tsc-watch macht das auch manchmal, es ist ein bisschen seltsam)
  • Dieser Ansatz erfordert 3 Befehle in 3 separaten Terminals, was einfach nur unpraktisch ist
  • Sowohl cpx als auch tsc-watch behandeln das Ctrl+C-Beenden nicht korrekt, was alle möglichen Probleme verursacht

Ich habe einige andere Fragen gefunden, die sich auf dieses Thema beziehen, aber keine von ihnen behebt die zuvor genannten Probleme (obwohl sie mir etwas über cpx & tsc-watch gesagt haben). Ich möchte nicht concurrently verwenden, weil es zu Timing-Problemen führen kann und die Konsolenausgaben der verschiedenen Prozesse vermischt (insbesondere tsc-watch und der eigentliche Server).

Die Verwendung von tsc-watch's --onSuccess, um die statischen Dateien zu kopieren, ist nicht ausreichend, da Änderungen in den Template-Dateien nicht erkannt werden. Dies kann umgangen werden, indem ein Kommentar in einer Quelldatei geändert wird, aber dies löst eine vollständige Neukompilierung aus (Starten des Servers). Auch der Watch-Modus von Webpack wäre nicht ausreichend, da er neue Dateien nicht erkennt und die Konsolenausgabe noch mehr verunreinigt.

Gibt es dafür irgendwelche Lösungen, die ich möglicherweise übersehen habe? Sollte ich einfach ein Skript schreiben, das automatisch die 3 erforderlichen Terminals öffnet?

Antwort #1

Für alle, die vor einem ähnlichen Dilemma stehen, würde ich empfehlen, SWC zu verwenden

Du solltest in der Lage sein, mit nur dieser Zeile zu erreichen, was du willst

swc src -D -d dist --strip-leading-paths -w

Verwenden Sie das -w-Flag, um auf Dateiänderungen zu achten

Dann können Sie nodemon verwenden, um Änderungen an Dateien in Ihrem dist-Verzeichnis zu überwachen

Antwort #2

Ich habe mich schließlich für Webpack mit dem copy-webpack-plugin entschieden.

Obwohl der Watch-Modus zum Zeitpunkt des Schreibens leider defekt ist, scheint er fast perfekt zu meinen Bedürfnissen zu passen:

  • Dieser Ansatz erfordert nur 2 Terminals (eines für webpack, das andere für nodemon). Es ist nicht perfekt, aber es ist viel besser als 3.
  • Neue Dateien sollten automatisch erkannt werden (obwohl es derzeit nicht zu 100% korrekt funktioniert)
  • Eine Änderung an statischen Dateien sollte nicht eine vollständige Neukompilierung verursachen, die dazu führen würde, dass der Server neu startet (auch dies funktioniert derzeit nicht zu 100 % korrekt)
  • Webpack behandelt Ctrl+C Beendigungen problemlos
  • Und der wichtigste Grund für mich: copy-webpack-plugin ermöglicht es mir, festzulegen, wie ich meine Dateien mithilfe der Option 'context' detaillierter kopieren möchte

Verwandte Artikel