TypeScript和Nodemon終極設置!


 

學習如何設置TypeScript和Nodemon,以提高你的生產力並輕松開發!

設置TypeScript和Nodemon有時會有些棘手,在本文中,我將向你展示如何輕松設置TypeScript和Nodemon!

在此github倉庫中找到本文的完整源代碼。

創建一個示例項目

讓我們從創建一個示例項目開始,我們將通過運行以下命令來完成:

mkdir typescript-nodemon-ultimate-setup
復制代碼

接下來,通過運行以下命令創建最小的npm packge:

npm init -y or yarn init -y
復制代碼

注意:為減少冗長性,在本文的其余部分中,我將使用npm並省略yarn命令

添加所需的依賴項:

npm i -D typescript ts-node nodemon @types/node
復制代碼

通過運行 npx tsc --init 初始化TypeScript

最后,我們需要一些源代碼來工作,所以讓我們創建 src/index.ts 文件,其中包含以下TypeScript。

function greet(name: string): void { console.log("Hello", name); } const readerName = "Medium Reader"; greet(readerName); 復制代碼

添加Nodemon

Nodemon的配置方式有很多種,我准備用一個json文件來配置,在我們的項目根目錄下添加 nodemon.json

{
  "restartable": "rs", "ignore": [".git", "node_modules/", "dist/", "coverage/"], "watch": ["src/"], "execMap": { "ts": "node -r ts-node/register" }, "env": { "NODE_ENV": "development" }, "ext": "js,json,ts" } 復制代碼

讓我們來看一下配置:

  • restartable:我們可以用來手動重新啟動程序的命令
  • ignore:不希望在更改時觸發程序重新啟動的文件列表
  • watch:更改時我們希望觸發程序重新啟動的路徑列表
  • execMap:文件類型/擴展名與運行時之間的映射
  • env:要包含的環境變量
  • ext:Nodemon監視的文件擴展名

為了運行和調試我們的設置,請在 package.json 文件中添加兩個腳本:

{
  "scripts": { "dev": "nodemon --config nodemon.json src/index.ts", "dev:debug": "nodemon --config nodemon.json --inspect-brk src/index.ts" } } 復制代碼

注意 dev:debug 腳本中增加了 --inspect-brk 標志,這告訴node停止程序的執行直到連接上調試器,這個可以換成 --inspect 標志來調試而不停止。

現在,我們可以使用 npm run dev 運行我們的程序,試着修改一些東西,就可以看到程序用更新的代碼重新運行。

使用VSCode進行調試

這個難題的最后一步是添加VSCode調試配置。

創建包含以下配置的 .vscode/launch.json 文件:

{
  "version": "0.2.0", "configurations": [ { "type": "node", "request": "attach", "name": "Attach", "restart": true, "processId": "${command:PickProcess}" } ] } 復制代碼

現在,當我們用 npm run dev:debug 啟動nodemon時,程序會停止,直到我們連接到它:

附加VSCode后,它將在代碼的第一行停止,你可以輕松調試程序!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM