node.js - Monitorizează, recompilează și repornește

Am căutat peste tot un exemplu de mod de a folosi modulul watch al lui Grunt pentru a efectua câțiva pași în ordine atunci când apare o schimbare a unui fișier. Nu am găsit un exemplu bun pentru niciunul dintre acestea, așa că dacă cineva m-ar putea îndruma în direcția corectă, ar fi grozav.

  1. Construiește proiectul TypeScript (am acest lucru funcțional)
  2. Monitorizează directoarele pentru modificări de fișiere (asta funcționează și)
  3. Începe rularea JavaScript-ului compilat într-un proces node, în timp ce încă urmărești schimbările de fișiere (care este cea mai bună metodă de a face asta prin Grunt? Modulul watch pare să pornească bine sarcina de re-compilare)
  4. La modificarea fișierului, oprește celălalt proces în execuție, recompilă și repornește când ai terminat. Continuă să urmărești modificările (Nu am idee despre acesta - repornirea este partea dificilă!)

Am încercat câteva moduri diferite, cum ar fi pornirea unui proces copil cu Grunt, dar ajung întotdeauna cu procese rătăcitoare, porturi blocate, STDIO redirecționat greșit sau alte probleme. Aș dori ca procesele copil să fie terminate dacă procesul Grunt se închide.

Există o modalitate bună de a gestiona asta? Mulțumesc!

Răspuns #1

Implementarea mea simplă prin configurarea fișierului package.json folosind nodemon pentru a monitoriza src în căutarea modificărilor fișierelor ts și compilarea fișierelor typescript/ts cu tsc...

Secțiunea „scripts” din package.json:

  "scripts": {
     "debug": "nodemon -e js,ts --watch src --exec \"yarn run build:ts && yarn run start:app\"",
     "build:ts": "node_modules/.bin/tsc",
     "start:app": "node dist/app"
  },

tsconfig.json

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

Răspunsul #2

Iată soluția mea. Am un nodemon care monitorizează folderul src și declanșează un ciclu de construire + apelul node ori de câte ori detectează modificări. Este apelat folosind npm run dev:src. Este o soluție destul de simplă:

package.json
"scripts": {
  ...
  "build:dev": "npm run clean && npm run compile:dev",
  "clean": "rimraf dist",
  "compile": "babel src -d dist && npm run copy:static",
  "compile:dev": "babel src -d dist -s && npm run copy:static",
  "copy:static": "cp -R src/static dist/static",
  "dev:dist": "npm run build:dev && node --inspect dist/server.js",
  "dev:src": "npm run build:dev && nodemon --watch src --exec npm run dev:dist",
}

EDITARE:

Aceasta este o alegere arhaică de tehnologie. Știu că acest lucru poate fi în afara scopului, dar aș sugera fie o abordare cu webpack/rollup ca aceasta:

"scripts": {
    "start": "node build/index.js",
    "build": "webpack",
    "dev": "cross-env NODE_ENV=development nodemon --watch src --watch package.* --watch .env --watch .env.development --watch .env.development.local --watch webpack.config.js --exec \"npm run build && node build/index.js\"",
    "lint": "eslint ./src --ext .js && prettier --check ./src/**/*{.js,.mjs}",
    "lint:fix": "eslint ./src --ext .js --fix && prettier --write ./src/**/*{.js,.mjs}",
  },

sau să consideri cu atenție abordarea lui Kent C. Dodds:

"scripts": {
    "start": "node .",
    "build": "babel --delete-dir-on-start --out-dir dist --copy-files --ignore \"**/__tests__/**,**/__mocks__/**\" --no-copy-ignored src"
  }

https://kentcdodds.com/blog/how-i-structure-express-apps