我之前写过一篇用vsc+gulp来自动编译ts并重启程序的文章,不过后来发现这样做的工作比较多而且有很多不足,比如
- 运行或者调试需要等待编译完成,项目大了之后编译这一步还是需要一定的时间的
- 难以调试测试代码,一般来说项目采用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相关的快捷键,参考
- F5 - 开始调试、继续执行
- cmd(ctrl) + shift + F5 - 重启
- shift + F5 - 结束调试
- F9 - 添加断点
- F10 - 单步跳过
- F11 - 单步调试
- 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项目,包含了上述的所有配置,希望对您有用。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。