node.js - Sledovať, znovu skompilovať a reštartovať

Hľadal som všade príklad spôsobu, ako použiť modul watch v Grunte na vykonanie niekoľkých krokov v poradí, keď dôjde k zmene súboru. Nenašiel som žiadny dobrý príklad tohto, takže ak by mi niekto mohol ukázať správny smer, bolo by to skvelé.

  1. Postaviť projekt TypeScript (toto mi funguje)
  2. Sledujte adresáre na zmeny súborov (toto tiež funguje)
  3. Spustite spustený JavaScript v procese Node, pričom stále sledujete zmeny súborov (aký je najlepší spôsob, ako to urobiť cez Grunt? Zdá sa, že modul watch spúšťa úlohu rekompilácie správne)
  4. Pri zmene súboru zastavte druhý bežiaci proces, prekompilujte a po dokončení reštartujte. Naďalej sledujte zmeny (Na toto nemám nápad - reštart je tá zložitá časť!)

Skúšal som niekoľko rôznych spôsobov, napríklad spustenie pomocného procesu s Gruntom, ale vždy skončím s visiacimi procesmi, zablokovanými portami, nesprávne nasmerovaným STDIO alebo inými problémami. Chcel by som, aby sa pomocné procesy ukončili, ak Grunt proces skončí.

Existuje nejaký dobrý spôsob, ako to zvládnuť? Ďakujem!

Odpoveď č. 1

Moja jednoduchá implementácia cez konfiguráciu súboru package.json s použitím nodemon na sledovanie zmien ts súborov v src a kompiláciu typescript/ts súborov pomocou tsc...

sekcia „scripts“ v súbore 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"
   ]
}

Odpoveď č. 2

Tu je moje riešenie. Mám nodemon, ktorý sleduje priečinok src a spúšťa cyklus kompilácie + volanie node vždy, keď zaznamená zmeny. Spúšťa sa pomocou npm run dev:src. Je to celkom jednoduché riešenie:

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

ÚPRAVA:

Toto je archaická voľba technológie. Viem, že to môže byť mimo rozsahu, ale navrhol by som buď použiť prístup webpack/rollup ako toto:

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

alebo zvážte dôrazne prístup Kenta C. Doddsa:

"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

Súvisiace články