utviklingsmiljø - Hvordan overvåke og laste inn på nytt ts-node når TypeScript-filer endres

Jeg prøver å kjøre en utviklingsserver med TypeScript og en Angular-applikasjon uten å transpile ts-filer hver gang.

Det jeg fant ut er at jeg kan kjøre .ts-filer med ts-node, men jeg vil også overvåke .ts-filer og laste appen/serveren min på nytt. Et eksempel på dette er kommandoen gulp watch.

Svar #1

Du kan nå enkelt npm install --save-dev ts-node nodemon og deretter kjøre nodemon med en .ts-fil, og det vil bare fungere:

nodemon app.ts

Tidligere versjoner:

Jeg slet med det samme for utviklingsmiljøet mitt helt til jeg la merke til at nodemons API lar oss endre standardoppførselen for å utføre en egendefinert kommando.

For eksempel, for den nyeste versjonen av nodemon:

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

Eller opprett en nodemon.json-fil med følgende innhold:

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

og kjør deretter nodemon uten argumenter.

Ved å gjøre dette, vil du kunne live-reloade en ts-node-prosess uten å måtte bekymre deg for den underliggende implementeringen.

Og med enda eldre versjoner av nodemon:

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

Eller enda bedre: eksterniser nodemons konfigurasjon til en nodemon.json-fil med følgende innhold, og kjør deretter bare nodemon, som Sandokan foreslo:

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

Svar #2

Jeg har kvittet meg med nodemon og ts-node til fordel for et mye bedre alternativ, ts-node-dev https://github.com/whitecolor/ts-node-dev

Bare kjør ts-node-dev src/index.ts

[REDIGER] Siden jeg skrev dette svaret, har nodemon forbedret seg mye, den nødvendige konfigurasjonen er nå mye lettere og ytelsen er mye bedre. Jeg bruker for tiden begge (på forskjellige prosjekter, selvfølgelig), og er fornøyd med begge.

Svar #3

Node.js støtter nå TypeScript!

Node har lagt til støtte for TypeScript, selv om det fortsatt er eksperimentelt: Kjøring av TypeScript nativt

For å bruke det:

  1. Installer Node 22.7.0 eller nyere

  2. Start Node med de riktige flaggene

    • Som et minimum må du bruke --experimental-strip-types
    • Hvis TypeScript-koden din bruker enum eller namespace, må du også bruke --experimental-transform-types

Kombinert med tillegg av overvåkingsmodus, kan du se og laste TypeScript på nytt i Node uten noen spesielle verktøy. For eksempel vil dette tillate deg å kjøre npm run dev i prosjektet ditt for å kjøre og overvåke TypeScript-filer uten noen ekstra pakker installert (typescript, tsx, ts-node, nodemon, osv.):

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

(Merk at jeg fortsatt vil anbefale å bruke TypeScript-kompilatoren for å sjekke typer som en del av byggeprosessen din som beskrevet nedenfor)

Alternative alternativer

Hvis du ikke er komfortabel med å bruke Nodes TypeScript-støtte mens den fortsatt er eksperimentell, her er noen andre anbefalinger.

For enkel bruk: tsx

tsx er den enkleste måten å kjøre TypeScript med Node på, men det har begrenset konfigurerbarhet. Under panseret bruker det esbuild, en JavaScript-bundler skrevet i Go som også transpilerer TypeScript.

  1. Installer tsx

    npm install --save-dev tsx

  2. Oppdater din package.json, f.eks.

    "scripts: {
  "dev": "tsx watch src/index.ts",

  3. Kjør det

    npm run dev

    (Juster disse trinnene hvis du bare vil installere tsx globalt og kjøre det direkte)

For mer konfigurerbarhet: nodemon/node-dev + ts-node + swc

Dette er like raskt som tsx og krever mer oppsett, men er også mer konfigurerbart. Det består av å bruke ts-node med swc, en TypeScript-kompatibel transpilator implementert i Rust som er en "størrelsesorden raskere" enn TypeScript-transpilatoren.

  1. Installer nodemon eller node-dev (hvilken som helst du foretrekker)

    • nodemon

      npm install --save-dev nodemon

    • node-dev

      npm install --save-dev node-dev

  2. Sett opp ts-node med swc-integrasjon

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

    1. Installer nødvendige pakker

      npm install --save-dev ts-node @swc/core @swc/helpers regenerator-runtime

    2. Legg dette til i tsconfig.json

        "ts-node": {
    "swc": true
  }

  3. Kjør nodemon eller node-dev, f.eks.

    nodemon --watch src src/index.ts

    eller :

    node-dev src/index.ts

Et notat om typekontroll

Veldig få verktøy utenfor TypeScript-kompilatoren (tsc) utfører faktisk typekontroll; dette inkluderer de fleste av verktøyene som er oppført her, selv Nodes egen innebygde TypeScript-støtte. Dette er vanligvis ikke et problem fordi de fleste redaktører har innebygd typekontroll, og typekontroll bør fortsatt være en del av byggeprosessen din. Du kan også utføre typekontroll separat sammen med testene dine eller som en pre-push hook via tsc --noEmit.

Svar #4

Her er et alternativ til HeberLZ sitt svar, ved å bruke 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 flagget angir hvilke utvidelser som skal søkes etter,
  • -w setter den overvåkede katalogen,
  • -x kjører skriptet.

--inspect i watch:serve-skriptet er egentlig et node.js-flag, det aktiverer bare debug-protokollen.

Svar #5

Dette fungerer for meg:

nodemon src/index.ts

Tilsynelatende takket være denne pull requesten: https://github.com/remy/nodemon/pull/1552

Svar #6

du kan bruke ts-node-dev

Den starter mål-nodeprosessen på nytt når noen av de nødvendige filene endres (som standard node-dev), men deler Typescript-kompilasjonsprosessen mellom omstarter.

Installer

yarn add ts-node-dev --dev

og din package.json kan være slik

"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

Spesielt for dette problemet har jeg laget tsc-watch biblioteket. Du kan finne det på npm.

Opplagt bruksområde ville være:

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

Svar #8

Legg til "watch": "nodemon --exec ts-node -- ./src/index.ts" i scripts-delen av din package.json.

Svar #9

Jeg vil helst ikke bruke ts-node og alltid kjøre fra dist-mappen.

For å gjøre det, bare sett opp din package.json med standardkonfigurasjon:

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

og deretter legg til nodemon.json-konfigurasjonsfil:

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

Her bruker jeg "exec": "npm restart"
Så alle ts-filer vil bli re-kompilert til js-filer og deretter starte serveren på nytt.

Å kjøre mens man er i utviklingsmiljø,

npm run dev

Med denne oppsettet vil jeg alltid kjøre fra de distribuerte filene og det er ikke nødvendig med ts-node.

Svar #10

Standard tilnærming

Fra og med Node.js versjon v16.19.0 (des'22), introduserer CLI API-en --watch-alternativet, noe som eliminerer behovet for tillegg avhengigheter som nodemon.

For TypeScript-eksekvering, bruk den velkjente pakken ts-node. Her er et konfigurasjonseksempel:

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

Ikke-standard tilnærming

Alternativt kan du vurdere tsx, selv om det ikke er like modent som ts-node.

Husk at tsx for øyeblikket mangler støtte for emitDecoratorMetadata, en avgjørende funksjon for mange prosjekter som trenger dekoratorer. Til tross for denne ulempen tilbyr tsx raskere kompilering (esbuild-backend):

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

Relaterte artikler