使用ts-node和vsc来调试TypeScript代码

2024年5月29日 170次阅读 来源: Jax2000

我之前写过一篇用vsc+gulp来自动编译ts并重启程序的文章，不过后来发现这样做的工作比较多而且有很多不足，比如

  1. 运行或者调试需要等待编译完成，项目大了之后编译这一步还是需要一定的时间的
  2. 难以调试测试代码，一般来说项目采用ts，测试代码也应该采用ts去编写，而采用编译+sourcemap的方式就很难调试测试代码

TS-NODE

可以看出这些不足都来自于一个根本原因，运行之前需要编译。后来我就发现了一个很强大的工具ts-node，来看下ts-node的简介:

TypeScript execution environment and REPL for node.

简单的说就是它提供了TypeScript的运行环境，让我们免去了麻烦的编译这一步骤。最简单的例子，在注册ts-node之后，我们就可以直接加载并运行ts文件

require('ts-node').register();

// 这样就能直接加载并运行 ./ts-code.ts...
require('./ts-code');

TS Config

为了断点调试，我们需要在tsconfig.json中开启sourceMap

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
}

VSC Launch.json 配置

为ts-node注册一个vsc的debug任务，修改项目的launch.json文件，添加一个新的启动方式

{
  "name": "Current TS File",
  "type": "node",
  "request": "launch",
  "args": [
    "${workspaceRoot}/src/index.ts" // 入口文件
  ],
  "runtimeArgs": [
    "--nolazy",
    "-r",
    "ts-node/register"
  ],
  "sourceMaps": true,
  "cwd": "${workspaceRoot}",
  "protocol": "inspector",
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen"
}

通过这些简单的配置，我们在vsc的debug界面中选择Debug by ts-node的任务，就可以开始愉快的调试了，修改代码之后直接重启服务即可，这里简单的介绍一些vsc debug相关的快捷键，参考

  1. F5 – 开始调试、继续执行
  2. cmd(ctrl) + shift + F5 – 重启
  3. shift + F5 – 结束调试
  4. F9 – 添加断点
  5. F10 – 单步跳过
  6. F11 – 单步调试
  7. shift + f11 – 单步跳出

调试当前打开ts文件

{
  "name": "Current TS File",
  "type": "node",
  "request": "launch",
  "args": [
    "${relativeFile}"
  ],
  "runtimeArgs": [
    "--nolazy",
    "-r",
    "ts-node/register"
  ],
  "sourceMaps": true,
  "cwd": "${workspaceRoot}",
  "protocol": "inspector",
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen"
}

调试 mocha 测试代码

在launch.json中添加

{
  "name": "Debug Current TS Tests File",
  "type": "node",
  "request": "launch",
  "program": "${workspaceRoot}/node_modules/.bin/_mocha",
  "args": [
    "-r",
    "ts-node/register",
    "${relativeFile}", // 调试当前文件
    "--colors",
    "-t 100000" // 设置超时时间，因为调试时执行时间较长容易触发超时
  ],
  "cwd": "${workspaceRoot}",
  "protocol": "inspector"
}

然后打开一个包含mocha单元测试的ts文件，添加断点，运行Debug Current TS Tests File即可进行断点调试。
运行项目中的所有单元测试建议在package.json中添加test脚本，比如

"scripts": {
  "test": "mocha -r ts-node/register src/**/*.spec.ts --colors"
}

然后运行npm test即可

例子

demo，这是我编写的一个非常简单的ts项目，包含了上述的所有配置，希望对您有用。

    原文作者：Jax2000
    原文地址: https://segmentfault.com/a/1190000010605261
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞