node.js - Hvordan kompilere TypeScript ved å bruke npm-kommandoen?

Jeg ville bare vite om det finnes en kommando som direkte kan kompilere TypeScript-koden og få output. Akkurat nå gjør jeg det slik at hver gang jeg gjør endringer i filen, må jeg kjøre kommandoen på nytt for å kompilere den.

npm start

Dette starter nettleseren og deretter må jeg stoppe kjøringen ved å bruke Ctrl+C og så må jeg kjøre filen ved å bruke npm-kommandoen

node filename

å se resultatet.

Så det jeg vil vite er, finnes det noen npm-kommando som vil kompilere .ts-filen og se endringene jeg har gjort i filen mens jeg kjører filen ved bruk av

node filename

kommando

Svar #1

Du kan starte tsc-kommandoen (TypeScript-kompilatoren) med --watch-argumentet.

Her er en idé:

  • Konfigurer TypeScript ved å bruke tsconfig.json-filen
  • Kjør tsc --watch, så hver gang du endrer en .ts-fil, vil tsc kompilere den og produsere utdataene (la oss si at du har konfigurert TypeScript til å legge utdataene i ./dist-mappen)
  • Bruk nodemon for å overvåke om filer i ./dist har endret seg, og om nødvendig starte serveren på nytt.

Her er noen skript (for å legge inn package.json) som kan hjelpe deg med det (du må installere følgende moduler 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'"
}

Da trenger du bare å kjøre npm start i en terminal

Svar #2

Dette er basert på løsningen foreslått av @ThomasThiebaud. Jeg måtte endre den litt for å sørge for at filene bygges i dist/ før nodemon prøver å starte serveren.

"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 må fortsatt kjøre npm start for å starte hele greia.

Svar #3

Her er min tilnærming: La oss si at du beholder alle typescript-filene dine i src-mappen og vil at utdata JavaScript-filer skal genereres i ./dist-mappen.

{
    "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"
    }
}

og TypeScript-konfigurasjonsfil tsconfig.json

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

Ok, hva skjer her

Først og fremst bør vi opprette tsconfig.json og fortelle TypeScript å legge de kompilerte filene i ./dist-mappen, og samtidig bør vi ekskludere node_module-mappen eller hva enn vi ønsker, og inkludere alt fra ["./src/**/*"]-katalogen.

Etter det bør vi i packages.json-filen spesifisere banen til vår kompilert index.js-fil

"main": "./dist/index"

og til slutt forteller vi tsc å --watch alle typescript-endringer, og nodemon å overvåke inne i ./dist-katalogen, og hvis noe endres vil nodemon starte serveren på nytt.

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

For å kjøre skriptet, skriv npm run dev

Relaterte artikler