如何解决范围包名称渗入源映射文件关联
在包添加了作用域后,断点不再起作用。
相关文件用 typescript
编写,并通过 ts-loader
中的 webpack
捆绑。然后它们由一个非常基本的网络服务器提供服务,并通过 pwa-chrome
进行调试。
发生的情况是,当一个范围被添加到包中时,包名不知何故渗入到源映射的文件路径中。 package.json
name
为 "@scopename/packagename"
时,源文件的路径突然变为:
C:\some\parent\folders\packageRootFolder\packagename\some\child\folders\sourcefile.ts
this shouldn't be here -----------^^^^^^^^^^^
幸运的是我注意到文件路径的变化,否则我可能会在这个过程中彻夜难眠和头疼好几天。我发现,我可以打开 chrome 的 devtools,在那里选择源文件,并在其中设置断点。如果断点被捕获,vscode 将打开另一个包含源文件的选项卡,并在那里中断。将鼠标悬停在磁盘上的原始文件和现在复制的源文件上,路径差异变得明显。
只需从 package.json
中删除作用域即可解决问题,并且断点再次起作用。
我添加了 yarnpkg
标签(yarn 2 'berry',with pnp),因为涉及到 package.json
,原因我无法理解,所以相关的包管理器可能有用信息。 Tbh 我不知道是哪一部分在做这个,以及为什么 package.json
会被触及。
为什么会发生这种情况,我该如何解决?
PS:不管它是什么,它不喜欢包名中的斜线。我临时修改了一个包含多个斜杠的无效包名,第一个斜杠之后的部分只是被放入路径中。这是一个示例,在文件中,然后是 chrome-devtools,然后将鼠标悬停在从 chrome-devtools 中断时打开的文件上:
可能是我在某处犯了一个非常愚蠢的错误,或者源映射创建者/转换器/消费者链中的一个链接有错误,或者一些误解。
目前,我正在尝试隔离问题,到目前为止,typescript
/ts-loader
可以完全删除,并且问题占上风。将再次尝试使用 npm 进行标准设置,如果仍然发生,请在 webpack 上打开一个问题,并感到困惑,这是如何以前从未被注意到的。
解决方法
Source maps 有一个命名空间,可以用 webpack configuration 显式设置,例如output.devtoolNamespace = 'web'
,解决问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。