调试 NodeJS CLI 工具时源映射不起作用

Question

我已经在 NodeJS 中创建了一个 CLI 工具（package.json

bin

部分），并且我能够安装并运行我的工具。不过我想知道如何调试它。我已经完成了以下操作：

npx -y create-nx-workspace
> cli-tools
> stack: none
> prettier: yes
> CI: later
> remote caching: no

cd cli-tools
code .

@nx/js:library

生成器位于

@nx/node

包中

npm i -D @nx/node
npx nx generate @nx/js:library --name biss --directory packages/biss --publishable --importPath=@company/cli-tools --bundler tsc --linter eslint --unitTestRunner jest

更新包

index.ts

#!/usr/bin/env node

const cwd = process.cwd();
console.warn(`Current directory "${cwd}"`);

更新package.json

{
  "name": "@company/cli-tools",
  ...,
  "engines": {
    "node": ">=10.12.0"
  },
  "bin": {
    "biss": "dist/index.js"
  }
}

构建包

npx nx build --configuration=production --project biss

全局安装 Verdaccio（管理员 cmd）

npm i --global verdaccio
verdaccio
> http://localhost:4873/
npm adduser --registry http://localhost:4873/
> Username: example
> Password: example
> Email: [email protected]

将包发布到 verdaccio 注册表

cd packages/biss
npm publish --registry http://localhost:4873/

CMD（管理员）

npm install --global @company/cli-tools --registry http://localhost:4873/

现在您应该能够从任何文件夹运行该工具

此测试项目已发布到此存储库

我已经尝试过以下方法

检查旗帜

在 VSCode => ctrl + , => 自动附加 => “调试 > Javascript：自动附加过滤器 = 始终”

在 VS Code 中添加断点

然后从 VSCode 中的文件夹运行

biss --inspect

。我看到 VS Code 尝试附加调试器，但我的断点没有被命中

编辑

如果我在代码中的某处添加

debugger;

语句，则该语句将被命中。然而我最终得到的是 javascript 包（index.js）而不是打字稿文件。我可以向此 javascript 文件添加更多断点，但我的打字稿文件中的断点仍然未绑定

编辑2

我进行了以下更改，添加/更正了 tsconfig 中的

"sourceRoot"

字段，并包括源文件。因此，现在 javascript 捆绑映射文件 (*.js.map) 包含以下内容

{
  "version":3,
  "file":"index.js",
  "sourceRoot":"../src/",
  "sources":["index.ts"],
  "names":[],
  "mappings":";;;;AAEA,qDAA2B;AAE3B,QAAQ,CAAC;AACT,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;AAC1B,OAAO,CAAC,IAAI,CAAC,uBAAuB,GAAG,GAAG,CAAC,CAAC"
}

所以现在sourceroot指向了正确的文件夹（

%appdata%\npm\node_modules\@company\cli-tools\src

），但是运行

biss --inspect

时vscode仍然不显示ts文件。

这是安装该工具的文件夹 (

%appdata%\npm\node_modules\@company\cli-tools

)。它包含源文件，以便在安装该工具时源映射可以指向它。

编辑3

我将以下

launch.json

文件添加到工具的文件夹中 (%appdata%/npm/node_modules/@company/cli-tools/.vscode)

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach",
      "type": "node",
      "request": "attach",
      "sourceMaps": true,
      "outFiles": ["C:/Users/username/AppData/Roaming/npm/node_modules/@company/cli-tools/**/*.js"]
    }
  ]
}

不知道VSCode会不会看，反正还是不行

Answer 1

来自ChatGPT的回答:-)

在此上下文中使用

npm link

可以帮助创建从

%appdata%

中全局安装的 CLI 工具返回到工作区中的 TypeScript 源文件的符号链接。这样，当您运行 CLI 工具时，它将引用您的本地 TypeScript 代码，使您可以更轻松地调试它。

设置方法如下：

分步指南

1. 导航到 CLI 工具的 TypeScript 项目文件夹

打开终端并导航到工作区中 CLI 工具的 TypeScript 项目的根文件夹。此文件夹应包含您的

package.json

文件。

cd /path/to/your/cli-tools-project

2. 在项目文件夹中运行

   npm link

运行以下命令为 CLI 工具创建全局符号链接。这告诉

npm

，您希望全局使用该包的本地版本，而不是安装在

%appdata%

中的版本（在我的例子中，来自包含 package.json 文件的文件夹）。

npm link

此命令根据本地项目的代码为 CLI 工具设置全局符号链接。

3. 将全局符号链接链接到您的 CLI 工具命令

全局链接本地项目后，您需要将此全局符号链接链接到用于调用 CLI 工具的命令。

如果您的 CLI 工具已全局安装（例如，在

%appdata%\npm

下），请使用以下命令使全局命令引用您链接的本地项目：

npm link @company/cli-tools

将

@company/cli-tools

替换为

package.json

中指定的包裹的确切名称。

4. 验证链接

运行 CLI 工具的命令以确保它现在正在使用本地工作区文件。您可以添加

console.log

语句或设置断点来确认 TypeScript 源映射正确链接到工作区文件。

5. 在 Visual Studio Code 中调试

现在，尝试在 Visual Studio Code 中进行调试。它应该引用您的本地 TypeScript 文件，因为 CLI 工具现在直接从您的工作区文件夹而不是全局安装位置执行。

注释

• 撤消链接：如果您想恢复为使用全局安装的版本，请在工作区中运行

  npm unlink @company/cli-tools

  ，然后运行

  npm uninstall -g @company/cli-tools

  。

• 更改后重建：当您对 TypeScript 代码进行更改时，请记住将其重新编译为 JavaScript（如果您不使用观察器），以便您的更改反映在链接的 CLI 工具中。

通过执行这些步骤，

npm link

应该可以帮助您使用工作区作为源直接调试 TypeScript 文件。

现在我的 VS Code 最终出现在我的打字稿文件中