前言

最近在寫一個博客的項目，前端用的 vue+typescript+element-ui ,后臺則選擇了 koa2+typescript+mongoDB 的組合。寫這篇博客的目的也是在寫后臺的過程遇到一些問題，查了很多資料才解決。于是權(quán)當(dāng)總結(jié)，亦是記錄，可以給別人做一個完整的參考。

基本信息

這里列出來的是會用到的一些配置信息，畢竟一直都在更新，可能這里說的以后某個版本就不支持了。

"nodemon"   : "^1.18.3",
"ts-node"   : "^7.0.1",
"typescript"   : "^3.1.1"
"node"    : "9.0.0"

問題描述

這次遇到的問題其實都和typescript有關(guān)。koa2已經(jīng)出來很久了，開發(fā)基本成熟，但是這次找資料的時候鮮有發(fā)現(xiàn)使用typescript開發(fā)的，即便有，也都很簡單，而且沒法解決我的問題。

那言歸正傳，使用ts開發(fā)koa，因為不涉及webpack打包編譯，所以就會遇到幾個問題：

1. 編譯
2. 實時刷新，重啟服務(wù)器
3. debugger

這些確實是初期很困擾我的地方，使用node開發(fā)，最簡單的無非是 node xxx.js ，進(jìn)一步也就是熱更新。但引入ts后就需要考慮編譯和實時刷新的問題。畢竟不像每改一點代碼，就手動重啟服務(wù)器，手動編譯。

解決方案

以下是我的解決方案，后面我會說一下為什么這樣寫，如果來不及看或者只想要答案的話復(fù)制就行。

"watch"  : "ts-node ./app/index.ts",
"start"  : "nodemon --watch app/index.js",
"build"  : "tsc",
"debugger" : "nodemon --watch ./app -e ts,tsx --exec node --inspect -r ts-node/register ./app/index.ts",
"watch-serve": "nodemon --watch './app/**/*' -e ts,tsx --exec ts-node ./app/index.ts"

那我們一個一個來說。

npm run watch

這個命令就是在本地使用 ts-node 啟動一個服務(wù)器。來看一下對 ts-node 的描述。

TypeScript execution and REPL for node.js, with source map support. Works with typescript@>=2.0.

這是一個在 node.js 的執(zhí)行和交互的typescript環(huán)境，簡而言之就是為了ts而生的??！

那這條命令就是根據(jù)當(dāng)前的入口運(yùn)行程序，唯一的一個問題是，不支持熱更新。所以pass。

npm run build && npm run start

這倆放一起說是因為相關(guān)性比較高?？梢哉f是相互依賴的關(guān)系吧。

先說第一條命令，很簡單，就是編譯當(dāng)前的ts項目文件，輸出目錄需要在 tsconfig.json 中配置。我給大家看下我的運(yùn)行結(jié)果。

app 是我的項目文件，運(yùn)行命令后，會在根目錄下創(chuàng)建 dist 文件夾存放我編譯好的js文件，打開就是這樣。

現(xiàn)在再說第二條命令，就是根據(jù)編譯好的文件入口啟動服務(wù)器。并且支持熱更新，但是， 注意這里有個但是 ，它只支持編譯過后的文件的熱更新，其實就是用js開發(fā)koa的啟動命令，那這時候在源文件中的任何修改都不會有作用，所以pass。

npm run watch-serve

重點來了，這才是解決問題的關(guān)鍵?。?！

這里完美的解決了 代碼的熱更新，實時編譯，服務(wù)器重啟 等問題。很好的提升了開發(fā)體驗。

這個解決方案有一些中文博客提到，但是當(dāng)初用的時候不知道為啥這樣用，導(dǎo)致后期犯了一些現(xiàn)在看來很低級的錯誤，這個就不提了。不過確實沒人說明這段命令的意思，直到昨天碰到一個問題，我才好好正視這個惡魔。

nodemon 和 ts-node 前文都介紹過了，我在這里只會針對具體的配置解釋一下。原本我的理解是這里用逗號分隔了兩個不同的命令，但是我太天真了。來看一下文檔的介紹。

By default, nodemon looks for files with the .js, .mjs, .coffee, .litcoffee, and .json extensions. If you use the --exec option and monitorapp.py nodemon will monitor files with the extension of .py. However, you can specify your own list with the -e (or --ext) switch like so:

nodemon -e js,jade

Now nodemon will restart on any changes to files in the directory (or subdirectories) with the extensions .js, .jade.

nodemon 有默認(rèn)吃的幾種文件類型，分別是 .js, .mjs, .coffee, .litcoffee, and .json ，而我這里用的 .ts ，并不在默認(rèn)支持文件里，因此這里使用 -e 來指定我需要擴(kuò)展的文件類型，這里的逗號也不過是用來分隔不同類型用的。那這里提到了 --exec 這個配置。原文里說如果用 nodemon 啟動 app.py 這個文件，那么將默認(rèn)支持 .py 這種擴(kuò)展類型。另外文檔里還寫了別的。

nodemon can also be used to execute and monitor other programs. nodemon will read the file extension of the script being run and monitor that extension instead of .js if there's no nodemon.json:

nodemon --exec "python -v" ./app.py

Now nodemon will runapp.py with python in verbose mode (note that if you're not passing args to the exec program, you don't need the quotes), and look for new or modified files with the .py extension.

這里說明，除了默認(rèn)支持的擴(kuò)展，通過這個配置，可以支持和正在運(yùn)行的腳本一樣的擴(kuò)展。并且，如果擴(kuò)展程序不需要傳參數(shù)的話，可以不寫單引號。

綜上所述，一個命令用于增加支持的文件類型，一個配置用來執(zhí)行和監(jiān)視其他類型的程序。

至于 ---watch 這個參數(shù)。

By default nodemon monitors the current working directory. If you want to take control of that option, use the --watch option to add specific paths:

nodemon --watch app --watch libs app/server.js

Now nodemon will only restart if there are changes in the ./app or ./libs directory. By default nodemon will traverse sub-directories, so there's no need in explicitly including sub-directories.

Don't use unix globbing to pass multiple directories, e.g --watch ./lib/*, it won't work. You need a --watch flag per directory watched.

這里面需要注意的有兩點，一是 nodemon 會默認(rèn)監(jiān)視當(dāng)前腳本文件執(zhí)行的文件夾，另一個就是如果要指定具體的文件夾時，需要些詳細(xì)的路徑，比如絕對路徑或者相對路徑，絕對不要使用 通配符 。因此我命令行中的使用是無效且違反規(guī)則的，然而非要這樣寫也不影響運(yùn)行。

原本到這也就結(jié)束了，然而昨天用了一個npm包，我想看看怎么運(yùn)行的，于是遇到了 debugger 的問題，這也是迫使我去認(rèn)真弄懂這段命令的原因。

npm run debugger

基本的調(diào)試方式網(wǎng)上到處都有，我就不說了，問題還是導(dǎo)入typescript之后，讓一切都混亂起來。我最開始嘗試了以下幾種命令：

'nodemon --inspect --watch ./app -e ts,tsx --exec ts-node ./app/index.ts'
'nodemon --watch --inspect ./app -e ts,tsx --exec ts-node ./app/index.ts'
'nodemon --watch ./app -e ts,tsx --exec ts-node --inspect ./app/index.ts'

這些都可以自己試著運(yùn)行一下，反正也沒啥用。然后就是今天一直想著這件事，換了幾個關(guān)鍵字google,找到這兩個地方。

https://stackoverflow.com/questions/49042830/why-does-the-node-inspector-not-start-when-i-am-using-nodemon-and-ts-node

https://github.com/TypeStrong/ts-node/issues/537

感謝stackoverflow和github，相互印證著看好像就明白是怎么回事了。

這里說下 -r 這個參數(shù)：

這里用于預(yù)加載一個模塊，并且可以多次使用這個參數(shù)，那說回我寫的命令里， ts-node/register 就是一個模塊，或者不嚴(yán)謹(jǐn)?shù)恼f， register 是 ts-node 下的一個方法。這里就是使用node預(yù)加載ts-node的register模塊用來運(yùn)行ts程序，并且開啟debugger模式。

后語

至此為止，在編譯，熱更新，debugger方面的坑應(yīng)該是踩完了，希望后面的人看了我寫的文章能少走些彎路吧。也希望大家多多支持腳本之家。

最新評論