使用 TypeScript 的 Node.js，在 VSCode 和 Nodemon 内进行调试

📦依赖项和配置

💻 编写我们的服务器和一些路由

📊 将 Debug 配置附加到我们的项目

🌐 附加功能：它也适用于 Google Chrome DevTools

☕️我想要这一切，甚至更多！

设置 Node.js 和 TypeScript 非常简单。我们的日常工作有时需要大量调试，并且还需要重新加载服务器。

让我们来看看如何在 VSCode 中使用 TypeScript + Nodemon + Debug 设置 Node.js（另外，您还可以在 Chrome DevTools 中对其进行调试）。

少说话，多写代码！🤓

📦依赖项和配置



$ mkdir devto-node-typescript
$ cd $_

添加我们的依赖项：



$ yarn init -y
$ yarn add @types/express@^4.16.1 express@^4.16.4 nodemon@^1.18.10 ts-node@^8.0.3 typescript@^3.3.4000

这是我们的依赖项列表：

@types/express@^4.16.1
express@^4.16.4
nodemon@^1.18.10
ts-node@^8.0.3
typescript@^3.3.4000

现在，让我们创建nodemon.json文件：



$ touch nodemon.json
$ vim $_

并粘贴以下内容：



{
  "restartable": "rs",
  "ignore": [".git", "node_modules/**/node_modules"],
  "verbose": true,
  "execMap": { // [A]
    "ts": "node --require ts-node/register"
  },
  "watch": ["src/"],
  "env": {
    "NODE_ENV": "development"
  },
  "ext": "js,json,ts"
}

// [A]：这里我们对 nodemon 说：“嘿 nodemon，如果我们使用“.ts”文件运行“nodemon”，请使用此行来执行该文件”。因此，现在我们可以这样做nodemon server.ts，它将用于ts-node编译我们的文件。

要了解有关 Nodemon 配置的更多信息，您可以查看其存储库中的示例

现在，让我们创建tsconfig.json文件：



$ touch tsconfig.json
$ vim $_

并使用：



{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",

    "strict": true,

    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,

    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.test.ts"]
}

与默认配置没有太大区别（例如当您运行tsc --init）

我们快完成了，让我们创建一个npm 脚本来启动我们未来的服务器：



// ...

"scripts": {
  "dev": "nodemon src/entry.ts"
}

// ...

现在，是时候创建我们的服务器了。

💻 编写我们的服务器和一些路由

正如我们在 nodemon 和 npm 脚本配置中看到的，我们需要创建一个名为的文件夹src和一个名为的文件entry.ts：



$ mkdir src
$ cd $_
$ touch entry.ts
$ vim $_

让我们写下以下内容：



import express from 'express';

const server = express();

server.use('/_healthcheck', (_req, res) => {
  res.status(200).json({ uptime: process.uptime() });
});

server.listen(4004, () => { console.log('Running at localhost:4004') })

现在我们可以运行：



$ yarn dev

看看我们的 Node.js 与 TypeScript + Nodemon 服务器正在运行：

太棒了！🎉

但是等等...还缺少一个重要部分，我该如何调试这个东西？😱

📊 将 Debug 配置附加到我们的项目

使用nodemon时，我们只需传递一个--inspect标志，即可使 Node 进程可调试。为此，我们创建一个新的 npm 脚本：



// ...

"scripts": {
  // ...
  "dev:debug": "nodemon --inspect src/entry.ts"
}

// ...

如果我们运行：



$ yarn dev:debug

我们可以在日志中看到调试选项：

太棒了！让我们创建 VSCode 配置：



$ mkdir .vscode
$ cd $_
$ touch launch.json
$ vim $_

并粘贴以下内容：



{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Node: Nodemon",
      "processId": "${command:PickProcess}",
      "restart": true,
      "protocol": "inspector"
    }
  ]
}