用typescript開發koa2的二三事

前言

最近在寫一個博客的項目，前端用的 vue+typescript+element-ui,後臺則選擇了 koa2+typescript+mongoDB的組合。寫這篇博客的目的也是在寫後臺的過程遇到一些問題，查了不少資料才解決。因而權當總結，亦是記錄，能夠給別人作一個完整的參考。

基本信息

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

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

問題描述

此次遇到的問題其實都和typescript有關。koa2已經出來好久了，開發基本成熟，可是此次找資料的時候鮮有發現使用typescript開發的，即使有，也都很簡單，並且無法解決個人問題。

那言歸正傳，使用ts開發koa，由於不涉及webpack打包編譯，因此就會遇到幾個問題：

1. 編譯
2. 實時刷新，重啓服務器
3. debugger

這些確實是初期很困擾個人地方，使用node開發，最簡單的無非是 node xxx.js，進一步也就是熱更新。但引入ts後就須要考慮編譯和實時刷新的問題。畢竟不像每改一點代碼，就手動重啓服務器，手動編譯。

解決方案

如下是個人解決方案，後面我會說一下爲何這樣寫，若是來不及看或者只想要答案的話複製就行。

"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啓動一個服務器。來看一下對ts-node的描述。

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

這是一個在node.js的執行和交互的typescript環境，簡而言之就是爲了ts而生的！！

那這條命令就是根據當前的入口運行程序，惟一的一個問題是，不支持熱更新。因此pass。

npm run build && npm run start

這倆放一塊兒說是由於相關性比較高。能夠說是相互依賴的關係吧。

先說第一條命令，很簡單，就是編譯當前的ts項目文件，輸出目錄須要在tsconfig.json中配置。我給你們看下個人運行結果。

app是個人項目文件，運行命令後，會在根目錄下建立dist文件夾存放我編譯好的js文件，打開就是這樣。

如今再說第二條命令，就是根據編譯好的文件入口啓動服務器。而且支持熱更新，可是，注意這裏有個可是，它只支持編譯事後的文件的熱更新，其實就是用js開發koa的啓動命令，那這時候在源文件中的任何修改都不會有做用，因此pass。

npm run watch-serve

重點來了，這纔是解決問題的關鍵！！！

這裏完美的解決了代碼的熱更新，實時編譯，服務器重啓等問題。很好的提高了開發體驗。

這個解決方案有一些中文博客提到，可是當初用的時候不知道爲啥這樣用，致使後期犯了一些如今看來很低級的錯誤，這個就不提了。不過確實沒人說明這段命令的意思，直到昨天碰到一個問題，我纔好好正視這個惡魔。

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 monitor app.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有默認吃的幾種文件類型，分別是 .js, .mjs, .coffee, .litcoffee, and .json，而我這裏用的 .ts，並不在默認支持文件裏，所以這裏使用 -e來指定我須要擴展的文件類型，這裏的逗號也不過是用來分隔不一樣類型用的。那這裏提到了 --exec這個配置。原文裏說若是用nodemon啓動app.py這個文件，那麼將默認支持.py這種擴展類型。另外文檔裏還寫了別的。

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 run app.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.

這裏說明，除了默認支持的擴展，經過這個配置，能夠支持和正在運行的腳本同樣的擴展。而且，若是擴展程序不須要傳參數的話，能夠不寫單引號。

綜上所述，一個命令用於增長支持的文件類型，一個配置用來執行和監視其餘類型的程序。

至於---watch這個參數。

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會默認監視當前腳本文件執行的文件夾，另外一個就是若是要指定具體的文件夾時，須要些詳細的路徑，好比絕對路徑或者相對路徑，絕對不要使用通配符。所以我命令行中的使用是無效且違反規則的，然而非要這樣寫也不影響運行。

本來到這也就結束了，然而昨天用了一個npm包，我想看看怎麼運行的，因而遇到了debugger的問題，這也是迫使我去認真弄懂這段命令的緣由。

npm run debugger

基本的調試方式網上處處都有，我就不說了，問題仍是導入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'

這些均可以本身試着運行一下，反正也沒啥用。而後就是今天一直想着這件事，換了幾個關鍵字google,找到這兩個地方。

https://stackoverflow.com/que...

https://github.com/TypeStrong...

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

這裏說下-r這個參數：

這裏用於預加載一個模塊，而且能夠屢次使用這個參數，那說回我寫的命令裏，ts-node/register 就是一個模塊，或者不嚴謹的說，register是ts-node下的一個方法。這裏就是使用node預加載ts-node的register模塊用來運行ts程序，而且開啓debugger模式。

後語

至此爲止，在編譯，熱更新，debugger方面的坑應該是踩完了，但願後面的人看了我寫的文章能少走些彎路吧。若是有些的不對的地方能夠留言指正。全部的源碼我應該暫時不會放出，至少等我寫完吧。

就醬紫，