utvecklingsmiljö - Hur man övervakar och laddar om ts-node när TypeScript-filer ändras


Jag försöker köra en utvecklingsserver med TypeScript och en Angular-applikation utan att transpilera ts-filer varje gång.

Vad jag upptäckte är att jag kan köra .ts-filer med ts-node, men jag vill också övervaka .ts-filer och ladda om min app/server. Ett exempel på detta är kommandot gulp watch.

Svar #1

Du kan nu enkelt npm install --save-dev ts-node nodemon och sedan köra nodemon med en .ts-fil och det kommer bara att fungera:

nodemon app.ts

Tidigare versioner:

Jag kämpade med samma sak för min utvecklingsmiljö tills jag märkte att nodemons API tillåter oss att ändra dess standardbeteende för att kunna köra ett anpassat kommando.

Till exempel, för den senaste versionen av nodemon:

nodemon --watch "src/**" --ext "ts,json" --ignore "src/**/*.spec.ts" --exec "ts-node src/index.ts"

Eller skapa en nodemon.json-fil med följande innehåll:

{
  "watch": ["src"],
  "ext": "ts,json",
  "ignore": ["src/**/*.spec.ts"],
  "exec": "ts-node ./src/index.ts"      // or "npx ts-node src/index.ts"
}

och sedan kör nodemon utan argument.

Genom att göra detta kommer du att kunna live-ladda om en ts-node-process utan att behöva oroa dig för den underliggande implementationen.


Och med ännu äldre versioner av nodemon:

nodemon --watch 'src/**/*.ts' --ignore 'src/**/*.spec.ts' --exec 'ts-node' src/index.ts

Eller ännu bättre: externalisera nodemons konfiguration till en nodemon.json-fil med följande innehåll, och kör sedan bara nodemon, som Sandokan föreslog:

{
  "watch": ["src/**/*.ts"],
  "ignore": ["src/**/*.spec.ts"],
  "exec": "ts-node ./index.ts"
}

Svar #2

Jag har dumpat nodemon och ts-node till förmån för ett mycket bättre alternativ, ts-node-dev https://github.com/whitecolor/ts-node-dev

Bara kör ts-node-dev src/index.ts

[REDIGERA] Sedan jag skrev detta svar har nodemon förbättrats mycket, den nödvändiga konfigurationen är nu mycket lättare och prestandan är mycket bättre. Jag använder för närvarande båda (på olika projekt, förstås) och är nöjd med båda.

Svar #3

Node.js stöder nu TypeScript!

Node har lagt till stöd för TypeScript, även om det fortfarande är experimentellt: Köra TypeScript nativt

För att använda det:

  1. Installera Node 22.7.0 eller senare

  2. Starta noden med de lämpliga flaggorna

    • Som ett minimum behöver du använda --experimental-strip-types
    • Om din TypeScript-kod använder enum eller namespace måste du också använda --experimental-transform-types

Kombinerat med tillägget av bevakningsläge kan du bevaka och ladda om TypeScript i Node utan några specialverktyg. Till exempel kommer detta att tillåta dig att köra npm run dev i ditt projekt för att köra och bevaka TypeScript-filer utan några extra installerade paket (typescript, tsx, ts-node, nodemon, etc.):

  "scripts": {
    "dev": "node --experimental-strip-types --watch src/index.ts"
  },

(Observera att jag fortfarande skulle rekommendera att använda TypeScript-kompilatorn för att kontrollera typer som en del av din byggprocess som beskrivs nedan)

Alternativa alternativ

Om du inte känner dig bekväm med att använda Nodes TypeScript-stöd medan det fortfarande är experimentellt, här är några andra rekommendationer.

För enkel användning: tsx

tsx är det enklaste sättet att köra TypeScript med Node, men det har begränsad konfigurerbarhet. Under huven använder det esbuild, en JavaScript-buntare skriven i Go som också transpilerar TypeScript.

  1. Installera tsx

    npm install --save-dev tsx
    
  2. Uppdatera din package.json, t.ex.

    "scripts: {
      "dev": "tsx watch src/index.ts",
    
  3. Kör det

    npm run dev
    

    (Justera dessa steg om du bara vill installera tsx globalt och köra det direkt)

För mer konfigurerbarhet: nodemon/node-dev + ts-node + swc

Detta är precis lika snabbt som tsx och kräver mer installation men är också mer konfigurerbart. Det består i att använda ts-node med swc, en TypeScript-kompatibel transpiler implementerad i Rust som är en "storleksordning snabbare" än TypeScript-transpilern.

  1. Installera nodemon eller node-dev (vilket du än föredrar)

    • nodemon

      npm install --save-dev nodemon 
      
    • node-dev

      npm install --save-dev node-dev 
      
  2. Ställ in ts-node med swc-integration

    https://github.com/TypeStrong/ts-node#swc-1

    1. Installera nödvändiga paket

      npm install --save-dev ts-node @swc/core @swc/helpers regenerator-runtime
      
    2. Lägg till detta i tsconfig.json

        "ts-node": {
          "swc": true
        }
      
  3. Kör nodemon eller node-dev, t.ex.

    nodemon --watch src src/index.ts
    

    eller :

    node-dev src/index.ts
    

En anteckning om typkontroll

Mycket få verktyg utanför TypeScript-kompilatorn (tsc) utför faktiskt typkontroll; detta inkluderar de flesta av de verktyg som listas här, även Nodes egen inbyggda TypeScript-support. Detta är vanligtvis inte ett problem eftersom de flesta redigerare har typkontroll inbyggd och typkontroll bör fortfarande vara en del av din byggprocess. Du kan också göra typkontroll separat tillsammans med dina tester eller som en pre-push-hook via tsc --noEmit.

Svar #4

Här är ett alternativ till HeberLZ:s svar, med användning av npm-skript.

Min package.json:

  "scripts": {
    "watch": "nodemon -e ts -w ./src -x npm run watch:serve",
    "watch:serve": "ts-node --inspect src/index.ts"
  },
  • -e flaggan anger vilka tillägg som ska sökas efter,
  • -w ställer in den övervakade katalogen,
  • -x kör skriptet.

--inspect i watch:serve-skriptet är faktiskt en node.js-flagga, den aktiverar bara debuggningsprotokollet.

Svar #5

Det här fungerar för mig:

nodemon src/index.ts

Tydligen tack vare sedan denna pull-begäran: https://github.com/remy/nodemon/pull/1552

Svar #6

du kan använda ts-node-dev

Den startar om mål-nodprocessen när någon av de nödvändiga filerna ändras (som standard node-dev) men delar TypeScript-kompilationsprocessen mellan omstarter.

Installera

yarn add ts-node-dev --dev

och din package.json kan se ut så här

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "tsc": "tsc",
  "dev": "ts-node-dev --respawn --transpileOnly ./src/index.ts",
  "prod": "tsc && node ./build/index.js"
}

Svar #7

Specifikt för detta problem har jag skapat tsc-watch biblioteket. Du kan hitta det på npm.

Självklart användningsfall skulle vara:

tsc-watch server.ts --outDir ./dist --onSuccess "node ./dist/server.js"

Svar #8

Lägg till "watch": "nodemon --exec ts-node -- ./src/index.ts" i scripts-sektionen i din package.json.

Svar #9

Jag skulle föredra att inte använda ts-node och alltid köra från dist-mappen.

För att göra det, konfigurera bara din package.json med standardinställningar:

....
"main": "dist/server.js",
"scripts": {
  "build": "tsc",
  "prestart": "npm run build",
  "start": "node .",
  "dev": "nodemon"
},
....

och sedan lägg till nodemon.json-konfigurationsfilen:

{
  "watch": ["src"],
  "ext": "ts",
  "ignore": ["src/**/*.spec.ts"],
  "exec": "npm restart"
}

Här använder jag "exec": "npm restart"
Så alla ts-filer kommer att kompileras om till js-filer och sedan startas servern om.

Att köra medan man är i utvecklingsmiljön,

npm run dev

Med denna uppsättning kommer jag alltid att köra från de distribuerade filerna och ingen TS-node behövs.

Svar #10

Standardmetod

Från och med Node.js version v16.19.0 (december 2022) introducerar CLI-API:et alternativet --watch, vilket eliminerar behovet av ytterligare beroenden som nodemon.

För TypeScript-exekvering, använd det väletablerade paketet ts-node. Här är ett konfigurationsexempel:

// package.json
{
    "scripts": {
        "dev": "node --watch --loader=ts-node/esm ./src/app.ts"
    },
    "devDependencies": {
        "ts-node": "~10.9.0"
    }
}

Icke-standardmetod

Alternativt kan du överväga tsx, även om det inte är lika moget som ts-node.

Tänk på att tsx för närvarande saknar stöd för emitDecoratorMetadata, en viktig funktion för många projekt som behöver dekoratörer. Trots denna nackdel erbjuder tsx snabbare kompilering (esbuild-backend):

// package.json
{
    "scripts": {
        "dev": "tsx watch ./src/app.ts"
    },
    "devDependencies": {
        "tsx": "~4.6.0"
    }
}

Relaterade artiklar