Hogyan kaphatunk automatikus újraindítást és töréspont-támogatást a Typescript és a Node segítségével

Kiváló gépelési élmény létrehozása a csomóponttal

Amikor először próbáltam gépelőgépet használni egy NodeJs projekten, küzdöttem egy jó útmutatóval, amely elmagyarázza, hogyan kell beállítani. Tehát úgy döntöttem, hogy írok egyet. Rendkívül óvatosan működik, de azt találtam, hogy ez nagyszerűen működik nekem. Remélem, hogy valaki más számára is.

Az elmúlt 12 hónapban számtalan Flow és Typescript projektet állítottam be. Kísérleteztem több szerkesztővel, tesztkerettel és eszközkészítéssel. Kezdetben kazánlapokkal kezdtem, de az utóbbi időben néhány kivétellel könnyebbnek találtam a beállítások egyszerű létrehozását. Ennek előnye az, hogy megértem a projekt minden részét. És szükség szerint bővítheti.

Ebben az útmutatóban megmutatom, hogyan állíthat be egy alapbeállítást gépelés és csomópont segítségével. És akkor hogyan lehet egy nagyon hatékony beállítást elérni a töréspont-támogatással (a VSCode-ban), az egységteszttel és az automatikus újraindítással. Ha ismeri az alapvető lépéseket, ugorhat jobbra a 3. és a 4. lépéshez, ahol az automatikus újratöltési és törési pontok kerülnek bemutatásra

1: Alapbeállítás

Kezdje egy üres könyvtárban. Saját esetemben egy typecript-node nevű mintaprojekt mappában indulok. Ebben a lépésben létrehozunk egy egyszerű beállítást az expressz kiszolgáló gépelésével történő írásához. A következő fájlok létrehozásával kezdjük meg.

$ npm init
$ mkdir src && touch src / server.ts
$ tsc - init

Melyik adja meg a következő szerkezetet

- src
   server.ts
package.json
tsconfig.json

Ezután hozzáadjuk a szükséges függőségeket a projekthez. Ehhez a lépéshez fonalat vagy npm-t is használhat (a fonalakhoz ragaszkodom a példáimban).

fonal hozzá expressz
fonal hozzáadása --dev typecript @ type / express

Ezután hozzáadunk egy szuper egyszerű szervert

És adja hozzá a következőt az npm szkriptek szakaszához a package.json-ban:

Cserélje le a tsconfig.json tartalmát a következőre:

Ez az. Most már képesnek kell lennie az npm indítására a terminálon, és látnia kell a szerver működését:

2: egységteszt hozzáadása Jesttel

Megállapítottam, hogy rendkívül fontos, hogy futtasson egy tesztbeállítást, amely egyszerűen használható és futtatható. Ha nem én vagyok, és a többi fejlesztő hajlamos elhagyni az egységteszteket a csata hevében. És amint ez megtörténik, rendkívül nehéz visszatérni a teszt lefedettségéhez.

Mióta megismerkedtem Jesttel, beleszerettem mind a sebességbe, a könnyű használatba, a kimenetbe, és ebben az esetben a legfontosabb: mennyire könnyű integrálni az írógéppel. Az induláshoz adjuk hozzá a következő függőségeket:

fonal hozzáadása --dev ts-jest jest @ type / jest

És adjuk hozzá a következőket a package.json fájlhoz (két szkriptet adtam hozzá a szkriptek szakaszhoz)

Ezután hozzáadunk egy dummy.test.ts fájlt az src könyvtárhoz annak ellenőrzésére, hogy a tesztfutó a várt módon működik-e.

Minden készen állunk. Az npm teszt futtatásával futtathatja a tesztkészletet egyszer vagy npm teszttel: nézze meg, hogy folyamatosan futtassa:

3: A szerver automatikus újraindítása a kód megváltozásakor

Egy másik ügyes kiegészítés a csomópontban történő fejlesztésnél az, hogy a kiszolgáló újraindul, amikor a kódot megváltoztatja. Ennek a gépelésnek megfelelő működése azonban kissé bonyolult lehet, ha még soha nem próbálta ki. De valóban nagyon egyszerű a nodemon és a ts-node segítségével. Tehát adjuk hozzá ezeket:

fonal hozzáadása --dev nodemon ts-node

És szeretem a nodemon konfigurációomat külön nodemon.json fájlban tartani, hogy az npm szkriptek könnyebben olvashatók legyenek. Tehát hozzon létre nodemon.json-t a projekt gyökérkönyvében a következő tartalommal:

Az indító szkriptünket úgy módosítjuk, hogy a ts-node (ez biztosítja, hogy a nodemon nem kerül összeomlásba, ha a gép nem fordul el), és hozzáadunk egy dev szkriptet, amely a nodemonot futtatja:

Most futtathatja az npm run dev programot, és bármikor elvégezheti a szerver automatikus újraindítását, ha elvégzi a változást:

4: Támogatás hozzáadása a töréspontokhoz a Visual Studio kódban

A fentiek elegendőek ahhoz, hogy produktívvá tegye a csomópont gépelésével történő írását. Azonban a töréspontok valóban felgyorsíthatják a hibakeresési élményt. Ez a valami, amellyel a legtöbb Java vagy más statikusan tipizált nyelv fejlesztője meglehetősen hozzászokott, de azt találtam, hogy a legtöbb csomópontfejlesztő ritkán használ. De amint megszokta, rendkívül fájdalmas a visszatérés a „console.log” hibakereséshez.

Az első lépés a csomópont futtatása az ellenőrző zászlóval. (a 6.3-as csomóponttól és újabbtól kell támogatni. De csak a 7.9.0 csomóponttal teszteltem). Tehát változtassuk a kezdő szkriptet a következőkre:

Ezután a következőket egészítjük ki a projektünkben található vscode launch.json fájlhoz. A vscode előállíthatja, vagy manuálisan hozzáadhatja a .vscode könyvtárhoz a projekt gyökerében. A vscode hibakeresésről itt olvashat bővebben.

Ezután hozzáadunk egy alapértelmezett végpontot szerverünkhöz, hogy kipróbáljuk, hogy a töréspontok a várt módon működnek-e.

És jó, hogy megyünk. Indítsa el a szervert az npm run dev programmal, és indítsa el a hibakeresést az F5 megnyomásával vagy a vscode hibakeresési fülre navigálással. Próbáljon meg egy töréspontot hozzáadni a fenti mintám 8. sorához, és nyomja meg a localhost-ot: 8000. Most látnia kell, hogy a vscode leáll a töréspontján. Ez lehetővé teszi mind a jelenleg hatályban lévő összes változó megvizsgálását, mind a vscode hibakeresési lapjának módosításával.

Az alján található hibakeresési fül lehetővé teszi a változók kezelését a hatókörben. Míg az átváltás a változók fölött a hatókörön keresztül lehetővé teszi, hogy megnézze őket a fenti legördülő menüvel.

Ez az. Most kódolhat, egy automatikus újraindító szerverrel és a távoli hibakereséssel engedélyezve a vscode-ban. Még nem is kell újraindítania a folyamatot a vscode-ban - ez automatikusan újra bekövetkezik. Az egyik figyelmeztetés az, hogy minden szerver újraindításakor törli a töréspontjait. Ha kitalálja, hogyan lehet ezt megoldani, kérjük, ossza meg velem az alábbi megjegyzésekben! Az útmutató kódját megtalálhatja a repoban: https://github.com/Aleksion/typescript-node-walkthrough

Találtál egy jobb módszert az írógéppel és a csomóponttal való együttműködéshez? Vagy elmulasztottam valamit, ami kritikus volt a betekintésem során? Hadd értesítsen itt vagy a Twitteren.
Tetszett ez? Kérjük, ne habozzon, ossza meg és ossza meg barátaival!