Website-Suche

node.js - Wie kompiliert man TypeScript mit dem npm-Befehl?

Ich wollte nur wissen, ob es einen Befehl gibt, der den TypeScript-Code direkt kompiliert und die Ausgabe erhält. Im Moment mache ich Folgendes: Jedes Mal, wenn ich Änderungen an der Datei vornehme, muss ich den Befehl erneut ausführen, um sie zu kompilieren.

npm start

Dies startet den Browser und dann muss ich die Ausführung mit Ctrl+C stoppen und dann muss ich die Datei mit dem npm-Befehl ausführen

node filename

die Ausgabe sehen.

Also möchte ich wissen, ob es einen npm-Befehl gibt, der die .ts-Datei kompiliert und die Änderungen, die ich an der Datei vorgenommen habe, sieht, während ich die Datei ausführe.

node filename

Kommando

Antwort #1

Sie können den Befehl tsc (TypeScript-Compiler) mit dem Argument --watch starten.

Hier ist eine Idee:

  • Konfigurieren Sie TypeScript mit der Datei tsconfig.json
  • Führen Sie tsc --watch aus, damit jedes Mal, wenn Sie eine .ts-Datei ändern, tsc sie kompiliert und die Ausgabe erstellt (nehmen wir an, Sie haben TypeScript so konfiguriert, dass die Ausgabe in den Ordner ./dist gelegt wird)
  • Verwenden Sie nodemon, um zu überwachen, ob sich Dateien in ./dist geändert haben, und falls nötig den Server neu zu starten.

Hier sind einige Skripte (zum Einfügen in package.json), die Ihnen dabei helfen können (Sie müssen die folgenden Module installieren npm install --save typescript nodemon npm-run-all rimraf)

"scripts": {
    "clean": "rimraf dist",
    "start": "npm-run-all clean --parallel watch:build watch:server --print-label",
    "watch:build": "tsc --watch",
    "watch:server": "nodemon './dist/index.js' --watch './dist'"
}

Dann müssen Sie nur npm start in einem Terminal ausführen

Antwort #2

Dies basiert auf der von @ThomasThiebaud vorgeschlagenen Lösung. Ich musste sie ein wenig ändern, um sicherzustellen, dass die Dateien in dist/ erstellt werden, bevor nodemon versucht, den Server zu starten.

"scripts": {
    "clean": "rimraf dist",
    "build": "tsc",
    "watch:build": "tsc --watch",
    "watch:server": "nodemon './dist/index.js' --watch './dist'",
    "start": "npm-run-all clean build --parallel watch:build watch:server --print-label"
  },

Du musst immer noch npm start ausführen, um das Ganze zu starten.

Antwort #3

Hier ist mein Ansatz: Angenommen, du bewahrst alle deine Typescript-Dateien im src-Ordner auf und möchtest, dass die ausgegebenen JavaScript-Dateien im ./dist-Ordner generiert werden.

{
    "name": "yourProjectName",
    "version": "1.0.0",
    "description": "",
    "main": "./dist/index",
    "types": "./dist/index",
    "scripts": {
        "dev": "tsc --watch & nodemon dist"
    },
    "author": "Gh111",
    "license": "ISC",
    "devDependencies": {
        "yourdevDependencies": "^1.0.0"
    }
}

und TypeScript-Konfigurationsdatei tsconfig.json

{
  "compilerOptions": {
    "target": "es5",       
    "module": "commonjs",  
    "outDir": "./dist",    
  },
  "include": ["./src/**/*"],
  "exclude": [
    "node_modules"
  ]
}

Okay, was ist hier los

Zuerst sollten wir tsconfig.json erstellen und TypeScript sagen, dass kompilierte Dateien in den ./dist-Ordner gelegt werden sollen, und gleichzeitig sollten wir den node_module-Ordner oder was auch immer wir wollen ausschließen und alles aus dem ["./src/**/*"]-Verzeichnis einbeziehen.

Danach sollten wir in packages.json Datei den Pfad zu unserer kompilierten index.js Datei angeben.

"main": "./dist/index"

und schließlich sagen wir tsc, dass es --watch bei allen typescript-Änderungen ausführen soll, und nodemon, dass es das Verzeichnis ./dist überwachen soll, und wenn sich etwas ändert, wird nodemon den Server neu starten.

"scripts": {
    "dev": "tsc --watch & nodemon dist"
 },

Um das Skript auszuführen, geben Sie npm run dev ein

Verwandte Artikel