學習如何設定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的

{
  "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後，它將在程式碼的第一行停止，你可以輕鬆除錯程式！