作用域包名称渗入源映射文件关联

Scoped package name bleeding into source map file association

包添加范围后,断点不再起作用。

相关文件写入typescript,并通过ts-loaderwebpack捆绑。然后它们由一个非常基本的网络服务器提供服务,并通过 pwa-chrome.

进行调试

发生的事情是,当一个范围被添加到包中时,包名称以某种方式渗入了源映射的文件路径。 package.json name of "@scopename/packagename",源文件的路径突然变成:

C:\some\parent\folders\packageRootFolder\packagename\some\child\folders\sourcefile.ts
       this shouldn't be here -----------^^^^^^^^^^^

幸运的是我注意到了文件路径的变化,否则我可能会为此彻夜难眠和头痛好几天。我发现,我可以打开 chrome 的开发工具,select 那里的源文件,并在其中设置断点。如果捕获到断点,vscode 将打开另一个包含源文件的选项卡,并在那里中断。将鼠标悬停在磁盘上的原始文件和现在复制的源文件上,路径差异变得明显。

只需从 package.json 中删除作用域即可解决问题,断点再次起作用。

我添加了yarnpkg标签(yarn 2 'berry',with pnp),因为涉及到package.json,我无法理解的原因,所以相关包经理可能是有用的信息。老实说,我不知道是哪个部分在做这个,以及为什么 package.json 被触及了。

为什么会发生这种情况,我该如何解决?


PS:无论如何,它不喜欢包名中的斜线。我临时破解了一个包含多个斜线的无效包名,第一个斜线之后的部分被放入路径中。这是文件中的示例,然后是 chrome-devtools,然后将鼠标悬停在从 chrome-devtools:

中断时打开的文件上

很可能是我在某个地方犯了一个非常愚蠢的错误,或者源映射链中的一个 link creators/transformers/consumers 有错误,或者有一些误解。

目前,我正在尝试隔离问题,到目前为止,typescript/ts-loader可以完全删除,问题仍然存在。将再次尝试使用 npm 进行标准设置,如果它仍然发生,两者都会在 webpack 上打开一个问题,并且感到困惑,这是以前从未注意到的。

源地图有一个命名空间,可以使用 webpack configuration 明确设置,例如output.devtoolNamespace = 'web',解决问题。