0-1 开发自己的黑曜石插件第 3 天

最编程 2024-10-01 07:18:06

...

磨刀不误砍柴工
随着模块变多肉眼看不出问题了于是先来解决一下debug配置的问题
之前只用过python的debug不知道typescript怎么搞，原来需要另外设置node.js的模式

主要参考的是：
https://www.youtube.com/watch?v=f3i9b3uK00U

预感踩坑开始，所以先新建了一个目录来实验一下，
新建一个src/main.ts放在上述目录下

然后cd到该目录运行：
npm install --save-dev ts-node tsconfig-paths

- npm是 Node.js 的包管理器
- ts-node是一个能让你（无需编译）直接运行.ts的执行器，
- tsconfig-paths帮助Node.js理解typescript项目中的（类似src/ * 这样）的路径别名

这段代码运行以后可以看到*/node_modules/里生成了这两个对应的文件夹。

另外在项目目录下新建一个tsconfig.json，直接粘贴下面的内容。

{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"sourceMap": true // 开启 source map
}
}

这一步的目的是让断点和调试信息通过 sourceMap 文件映射回 TypeScript 文件
也就是说 ts-node 不显式生成 .js 文件，它会在后台动态编译你的 TypeScript 文件，是在开发阶段的一种调试。

最后就是回到vs code界面点那个侧边栏那个debug icon -> create a launch.json file -> node.js，打开配置launch.json, 粘贴下面内容：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "debug Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/src/main.ts",
            "runtimeArgs": ["-r", "ts-node/register","-r","tsconfig-paths/register"],
            "console":"integratedTerminal",
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ]
        }
    ]
}

这里的：

-r 是require的意思，表示在启动node.js前先加载（require）一个模块
后面的参数就是前面生成的两个文件夹
console的配置使得能在vs code的终端看到的debug信息

最最后在代码里加断点，测试就可以看到成功了。

上一篇：通过 uniapp 实现画面上下浮动的效果

下一篇：单一示例设计模式 - 双重检查锁定单一示例模板

0-1 开发自己的黑曜石插件第 3 天

0-1 开发自己的黑曜石插件第 6 天