Visual Studio - 在 .NET5 托管 React 应用程序使用的本地 NPM 包中调试 Typescript答案

【问题标题】：Visual Studio - Debugging Typescript in Local NPM Package Used by .NET5 Hosted React AppVisual Studio - 在 .NET5 托管 React 应用程序使用的本地 NPM 包中调试 Typescript
【发布时间】：2021-06-28 13:08:01
【问题描述】：

我正在使用 Typescript 开发一个 NPM 包，旨在用于 React 应用程序。直截了当吧？我还有一个示例/测试应用程序，它是一个 .NET Core 托管的 React 应用程序（直接来自 VS2019 模板，加上通过 NPM 添加的 Typescript）。尽管构建所有内容并调试示例应用程序工作正常，但我无法让 Visual Studio 调试本地 NPM 包中的 Typescript 文件。

NPM 包是一个 NJSProj。我通过在scripts 和package.json 中使用"build": "tsc" 来构建它。我的tsconfig.json 看起来像这样：

{
  "compilerOptions": {
    "baseUrl": ".",
    "noEmitOnError": true,
    "removeComments": false,    
    "moduleResolution": "Node",
    "target": "es2019",
    "lib": [ "es2019", "dom" ],
    "strict": true,
    "sourceMap": true,
    "declaration": false,    
    "module": "ESNext",
    "jsx": "react",
    "listFiles": true
  },
  "include": ["src"],
  "exclude": [
    "node_modules"
  ]
}

对于使用示例/测试的应用程序，我有一个直接从 VS2019 模板构建的 .NET5 托管的 React 应用程序，以及通过 npm 安装的 Typescript。为了让示例应用程序使用本地包，我在包文件夹中使用npm link。然后，在示例应用程序的ClientApp 文件夹中，在npm install 之后，我使用npm link mypackagename 创建依赖项。

在我的示例应用程序代码中，我能够使用import * as MyPackage from 'mypackagename'; 导入本地包，使用它的导出，并且它全部构建并运行良好。但我无法让 Typescript 调试在 Visual Studio 中工作。

我在包中的 .TS 文件中设置的任何断点在运行时都不会“绑定”。此外，如果我在示例应用程序 JS/TS 代码中设置断点，在对我的包进行任何调用并单步执行我的包的代码之前，它会单步执行已编译的 Javascript 版本（有趣的是，不是主包版本），而不是原始 TS 代码。各个源映射都在那里，此外，当前行对于 Javascript 版本是错误的，但对于 Typescript 版本是正确的，这让我认为它确实在应用 .MAP 文件但只是没有找到 .TS。另一个奇怪的事情是示例应用程序代码中的 Intellisense 可以很好地看到我的包及其导出，并且我能够 F12 进入我的示例消费应用程序引用的类或函数名称，它会从我的本地包中打开正确的 TS 文件资源。因此，Visual Studio 清楚地知道如何找到源代码，并且似乎甚至可以看到 MAP 文件，但不会让我设置断点，并且在 Step In 之后不会导航到正确的文件。

我尝试的一种方法是在示例 React 应用程序上使用 eject 以查看我是否可以直接修改 webpack.config.js 并尝试强制它在我的包中编译 Typescript，而不是在单独的构建步骤中使用 TSC，但我似乎找不到需要更改的正确条目（create-react-app 生成的 webpack.config.js 是个怪物）。

我也尝试更改我的tsconfig 设置：

 "sourceMap": false,
 "inlineSources": true,
 "inlineSourceMap": true,

这是朝着正确方向迈出的一步，因为如果我在示例应用程序中设置断点，我现在至少可以进入我的包的 TS 文件。但是，Visual Studio 仍然不会将其与我磁盘上的实际 TS 文件相关联，而且我仍然无法在 NSProj 中的这些文件中设置断点。

最后请注意，这是 Visual Studio 2019，而不是 Visual Studio Code。我还没有尝试过 Code，但如果可能的话，我想坚持使用完整的 VS2019。

所以出现了两个主要问题：

如何在运行时在 Visual Studio 中实际调试包的 Typescript 文件？
可能相关，我应该为本地 npm 包使用不同的构建过程吗？我注意到，使用这种方法，热重载是不可能的，因为我每次都必须使用tsc 重建它。我更希望我的示例应用程序编译我的包的 TS 源代码以及示例应用程序本身的代码，但这是我怀疑我必须深入研究 React 构建脚本的内容的地方，我有点对这些构建链来说是新手。

感谢您的建议！

【问题讨论】：

标签： reactjs typescript visual-studio debugging npm

【解决方案1】：

哇，从昨天到今天，经过 10 个小时的反复试验，我偶然发现了这个神奇的组合。

我不需要使用tsc 构建npm 包来进行调试。事实上，本地包的tsconfig.json 在调试运行期间最终会被忽略。相反，我想出了如何在构建示例消费应用程序期间让 webpack 包含本地模块源文件
我确实必须在示例消费应用程序上使用npm run eject，以展开所有隐藏的脚本，最重要的是webpack.config.json
如上所述，我继续使用npm link
在scripts/paths.js（在eject 之后创建）中，我必须将localModuleSrc 路径添加到我的模块源，以及appSrc，这只是src 文件夹
关键是我必须修改webpack.config.json 以使用awesome-typescript-loader 而不是babel。 babel-loader 显然拒绝在 src 之外编译 Typescript 文件。然后我将它用于appSrc 和localModuleSrc 中的所有内容：

{
      test: /\.(js|mjs|jsx|ts|tsx)$/,
      include: [paths.appSrc, paths.localModuleSrc],
      loader: require.resolve('awesome-typescript-loader'),
},

最后我不得不在plugins 之前添加dev-tool: 'source-map'。没有这个，调试有点工作，但断点总是偏离 1 或 2 行。

然后，令我惊讶的是，我的本地包源和我的示例消费应用程序中的断点开始命中。

所以底线似乎是babel-loader 不适合这个用例，因为我猜它不会触及src 之外的任何东西。但是awesome-typescript-loader 名副其实。

【讨论】：