這兩天在看ts,也在入門中, 網上大部分教程都是前端配置ts開發除錯,這個也有很多相當成熟的實踐教程, 這篇文章主要是nodejs的ts配置, 說起來也是相當簡單的, 不涉及任何ts的語法與概念, 同時也可以根據本文配置es6的nodejs開發環境(主要是模組部分).
ts-node的使用
說起 babel-node 大家應該都挺熟悉了, ts-node是一個類似的工具,可以在不編譯的情況的執行ts檔案,方便我們開發, 當然是node環境下的.
安裝
npm i -D typescript ts-node複製程式碼建立app.ts檔案:
//app.ts
console.log(1)複製程式碼呼叫命令ts-node app.ts(全域性安裝的情況下), 如果一切正常的話,我們應該可以看到想要的輸出了.
一直到上面都是常規話題, 沒什麼深入下去的意義. 下面講到ts-node的除錯
除錯
根據nodejs官網 我們知道nodejs的除錯方法有下面幾種:
- node-inspect 一個第三方開發的除錯工具, 今天我們不涉及
- chrome 開發者工具, 下面會講到
- vs code 今天的重點
- vs
- webstorm 也是相當方便的工具
vs code的除錯
根據官網我們開啟node的inspect模式(ts-node同樣可以)ts-node --inspect app.js, 應該可以看到類似的的提示:
這樣表示已經可以進行除錯了, 但是貌似不可以進行打斷點之類的操作, 這個就要藉助vscode了.
開啟vscode debug皮膚增加除錯選項, 選擇attach to progess:
然後點選debug, 會彈出類似下面的彈窗:
注意紅框, 會有幾個node程式, 選擇帶inpect的那個程式, 如果一切進行的正常的話就可以進行除錯了:
chrome 開發者工具
這個更加簡單, 在任意網頁開啟開發者工具, 我們可以看到如圖
點選node圖示同樣可以進行除錯:
但是貌似不是很穩定, 經常崩潰, 而且windows上也有問題.
最後是個示例: github.com/xiadd/node-…
感興趣可以star