【发布时间】：2020-12-24 01:13:45
【问题描述】：
我正在开发一个 Angular 9 应用程序，我们使用网络工作者进行更繁重的计算。整个应用程序是用 Typescript 编写的，包括网络工作者。不幸的是，我无法找到正确的方法来让 Angular 构建为 Web Worker 代码创建源映射，以便 Chrome 调试器可以逐行执行代码。
最好的解决方案是能够单步执行我的 Typescript 工作代码，就像我可以单步执行主线程的 Typescript 一样。但是，鉴于我根本无法调试 Typescript 工作人员，即使能够单步调试已转译的 Javascript 也是一种胜利。
这是我看到的情况：
我的 Angular 项目 editor.worker.ts 中有一个文件，它描述了网络工作者。该工作人员在其他地方被实例化为：
const worker = new Worker('./editor.worker', { name: 'Editor', type: 'module' });
在 Chrome 中构建应用程序并加载后，当我进入 devtools Sources 选项卡并搜索 worker 时，我发现 2 个文件：
-
editor.worker.ts 只包含一行：
module.exports = __webpack_public_path__ + "Editor.worker.js" -
Editor.worker.js 包含转译后的 Javascript。
当应用在 Chrome 中运行时，我可以在转译的 .js 文件中设置断点，并且调试器会在遇到代码行时暂停。但是，源代码中突出显示的行是editor.worker.ts 中的单行。当我浏览回 Editor.worker.js 源文件时，我的断点不再显示，并且调试器无法识别暂停执行的特定代码行，并且我无法单步执行代码. （按 F8 会按预期继续执行。）
似乎我可能缺少用于工作人员的 webpack 设置，或者缺少用于对 sourcemap 执行特殊操作的 typescript 指令，或者两者兼而有之。感谢任何帮助我调试打字稿工作人员的帮助。谢谢！
【问题讨论】：
-
这里有一个关于运送源地图的帖子：github.com/snowpackjs/snowpack/discussions/1200
标签： angular typescript webpack web-worker