Nodejs+TS项目调试运行环境搭建

背景

最近在搞原生 Nodejs + TypeScript 实现HTTP服务的项目，项目部署阶段在做技术选型，需要调试Debug、TS编译、JS可运行三个阶段，均能正常跑通。

搜索引擎收集到的信息，大部分都是针对于 JavaScript 调试，没有针对 TypeScript 环境的。

本文简单介绍 JS 环境下的 Nodejs 项目调试，重点介绍 TS 环境的调试。

JavaScript 调试

JS 的调试主要分两种：

1. IDE 调试：VSCode、WebStorm 都提供了调试JS代码的能力；对于 VSCode 而言，具体的调试参数可以通过 .vscode/launch.json 进行配置，更多信息可以参考 VSCode Debugging。
2. Chrome的inspect：利用浏览器的能力进行调试，这里就不展开了。

TypeScript 调试&运行环境

最开始，我并不知道：市面上现有成熟项目所使用的Debug、Build、Deploy所涉及到的工具大约有哪些。

通过大量 GPT ＋ 搜索引擎，逐渐了解了现有常用的一些工具；

受历史原因的影响，模块导入、路径解析这两大方面，有很多解决方案，不同的解决方案存在不同的问题；解决这些问题，花费了我最多的时间。

先给下最终解决方案：

• Debug & 运行代码： tsx
• 编译TS到JS：tsc
• 项目打包（可选）：pkg（二进制）、webpack、rollup

打包可选，不想打包直接node运行也可以。

TS-Node

github.com/TypeStrong/… stars）

ts-node是应该是一个比较悠久的解决方案了，2015年7月发布第一版本。tsconfig.json 对其有配置支持。

安装步骤如下：

1. 安装ts-node：npm install -D ts-node
2. 安装tsconfig-paths： npm install --save-dev tsconfig-paths

调试步骤：

1. 全局安装ts-node：npm install -g ts-node
2. 配置launch.json：.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "TS-Debug",
      "runtimeExecutable": "ts-node",
	    "runtimeArgs": ["--esm", "-r", "tsconfig-paths/register"], // --esm等效tsconfig中配置
      "args": ["src/app.ts"], // 入口文件
      "cwd": "${workspaceFolder}", // 设置工作目录为项目根目录。
      "console": "integratedTerminal", // 将调试输出发送到 VSCode 集成终端。
      "internalConsoleOptions": "neverOpen" // 防止内部调试控制台自动打开
    }
  ]
}

运行： package.json

"type": "module",
"scripts": {
	"start": "ts-node --esm src/app.ts",
}
// 或者 tsconfig.json
"ts-node": {
  "esm": true // ts-node支持
},

🚧 缺陷：ESM (import /export) 下，tsconfig-paths 无法识别路径别名。

TSX

github.com/privatenumb… stars）

新一代TS运行环境库，第一个版本是2022年5月，开箱即用，无需额外配置。

安装： npm install --save-dev tsx

调试：.vscode/launch.json

{
  "type": "node",
  "name": "tsx",
  "request": "launch",
  "program": "src/app.ts",
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/tsx",
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen",
  "skipFiles": ["<node_internals>/**", "${workspaceFolder}/node_modules/**"]
}

运行：package.json

"scripts": {
  "build": "tsc",
  "start": "tsx src/app.ts"
}

参考

搭建一套支持TS的Node运行环境

github.com/dividab/tsc… for ts-node + tsconfig-paths + esm**

typestrong.org/ts-node/doc…

github.com/dividab/tsc…