nodemon實(shí)現(xiàn)Typescript項(xiàng)目熱更新的示例代碼
我們都知道nodemon可以直接用來(lái)在開(kāi)發(fā)環(huán)境下運(yùn)行js文件，可以在文件改變時(shí)自動(dòng)刷新和重啟服務(wù)器。但是最近剛好在學(xué)typescript，所以就想使用ts來(lái)寫(xiě)，也想達(dá)到同樣的效果，總結(jié)一下方法，大概有如下幾種：
nodemon+tsc:
這個(gè)方法很簡(jiǎn)單，首先通過(guò)tsc將我們的ts文件編譯到dist目錄下，然后再通過(guò)nodemon直接運(yùn)行dist目錄下的文件即可。至于ts的輸出目錄相關(guān)配置可在tsconfig.js中設(shè)置。
tsc && nodemon --watch dist/index.js
但是這種方式有個(gè)缺點(diǎn)，就是nodemon只監(jiān)聽(tīng)了dist目錄，可能有時(shí)候你修改了源碼并不能觸發(fā)熱更新，另外還有個(gè)問(wèn)題就是多了一個(gè)dist目錄中轉(zhuǎn)，感覺(jué)不爽。
nodemon+ts-node:
命令如下：
nodemon -e ts,tsx --exec ts-node ./index.ts"
大概意思就是監(jiān)聽(tīng)文件增加ts、tsx兩種文件類型，使用ts-node運(yùn)行index.ts文件。
當(dāng)然，上述參數(shù)是設(shè)置在命令行中的，也可以在nodemon.json中設(shè)置：
{
"verbose": false,
"debug": false,
"exec": "ts-node ./index.ts",
"ignore": [
"mochawesome-report",
"node_modules",
"./test",
"**/*.d.ts",
"*.test.ts",
"*.spec.ts",
"fixtures/*",
"test/**/*",
"docs/*"
],
"events": {
"restart": ""
},
"watch": ["./app", "./configs", "./app.ts"],
"ext": "ts tsx",
"inspect": true
}
如果有使用到tsx文件，記得在tsconfig.json文件中將jsx取消注釋,否則編譯時(shí)可能會(huì)提示錯(cuò)誤。
除了上述兩種方法，今天無(wú)意中試了下直接使用nodemon來(lái)執(zhí)行ts文件，發(fā)現(xiàn)控制臺(tái)報(bào)錯(cuò)了，原諒我是個(gè)英語(yǔ)渣，不明白具體說(shuō)了什么，但是看到了ts-node的身影，果斷安裝ts-node再試，竟然成功了。
nodemon ./index.ts
但是這樣修改了ts文件不會(huì)熱更新，可以在nodemon.json文件中將ext屬性添加上ts就可以了。
{
"restartable": "rs",
"ignore": [".git", "node_modules/**", "client/*", "dist", ".cache", "logs"],
"verbose": true,
"execMap": {
"": "node",
"js": "node --harmony"
},
"events": {
"start": "",
"crash": "",
"exit": "",
"restart": ""
},
"ext": "js json ts tsx",
"watch": ["./**"],
"env": {
"NODE_ENV": "development",
"PORT": "3002"
},
"legacy-watch": false
}
當(dāng)然除了上述方式，還可以使用構(gòu)建工具來(lái)進(jìn)行處理，如webpack，parcel等，當(dāng)然如果大家有其他好的建議，歡迎交流。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 在Node.js中使用TypeScript的方法示例
- typescript在node.js下使用別名(paths)無(wú)效的問(wèn)題詳解
- 使用nodejs?+?koa?+?typescript?集成和自動(dòng)重啟的問(wèn)題
- 淺談TypeScript 用 Webpack/ts-node 運(yùn)行的配置記錄
- 手把手教你使用TypeScript開(kāi)發(fā)Node.js應(yīng)用
- TypeScript開(kāi)發(fā)Node.js程序的方法
- 詳解使用Typescript開(kāi)發(fā)node.js項(xiàng)目（簡(jiǎn)單的環(huán)境配置）
- Node.js和Express中設(shè)置TypeScript的實(shí)現(xiàn)步驟
相關(guān)文章
詳解express使用vue-router的history踩坑
這篇文章主要介紹了express 使用 vue-router 的 history 踩坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
NodeJS?Express使用ORM模型訪問(wèn)關(guān)系型數(shù)據(jù)庫(kù)流程詳解
這篇文章主要介紹了NodeJS?Express使用ORM模型訪問(wèn)關(guān)系型數(shù)據(jù)庫(kù)流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-01-01
Node在Controller層進(jìn)行數(shù)據(jù)校驗(yàn)的過(guò)程詳解
這篇文章主要給大家介紹了關(guān)于Node在Controller層進(jìn)行數(shù)據(jù)校驗(yàn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要為大家介紹了OpenSCA技術(shù)原理npm依賴示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了koa2使用ejs和nunjucks作為模板引擎的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
nodejs?實(shí)現(xiàn)簡(jiǎn)單的文件上傳功能(示例詳解)
這篇文章主要介紹了nodejs?實(shí)現(xiàn)簡(jiǎn)單的文件上傳功能,文件上傳方式分為三種，本文通過(guò)實(shí)例代碼給大家詳細(xì)介紹，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-02-02
本文主要介紹了Node.js的入門(mén)知識(shí)，包括：Node.js的特點(diǎn)，運(yùn)行環(huán)境以及應(yīng)用小例。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
Node.js創(chuàng)建HTTP文件服務(wù)器的使用示例
我們的目的比較簡(jiǎn)單，使用Node.js創(chuàng)建一個(gè)HTTP協(xié)議的文件服務(wù)器，你可以使用瀏覽器或其它下載工具到文件服務(wù)器上下載文件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
nodejs文件實(shí)現(xiàn)打包成exe, 并設(shè)置開(kāi)機(jī)自啟動(dòng)的方法詳解(沒(méi)有黑窗口)
這篇文章主要介紹了nodejs文件實(shí)現(xiàn)打包成exe, 并設(shè)置開(kāi)機(jī)自啟動(dòng)的方法,結(jié)合實(shí)例形式分析了node.js使用pkg包實(shí)現(xiàn)生成exe可執(zhí)行文件的相關(guān)操作技巧,需要的朋友可以參考下2023-05-05
nodejs使用http模塊發(fā)送get與post請(qǐng)求的方法示例
這篇文章主要介紹了nodejs使用http模塊發(fā)送get與post請(qǐng)求的方法,結(jié)合實(shí)例形式分析了nodejs基于http模塊實(shí)現(xiàn)發(fā)送get與post請(qǐng)求具體操作技巧,需要的朋友可以參考下2018-01-01