文件被分配一个 `# sourcemappingurl` 但已经有一个

阅读时长 2 分钟读完

在前端开发中,我们通常会使用 source map 来映射压缩后的代码和源代码之间的关系,以方便调试。而在生成 source map 文件时,有时候你会遇到这样的错误提示:file.js already has a source map associated with it,即当前文件已经被分配了一个 sourcemappingurl

什么是 sourcemappingurl?

sourcemappingurl 是指将源码映射文件的 URL 地址嵌入到源码文件末尾的一种方式,例如下面的示例:

当浏览器加载压缩后的代码时,它会自动请求并下载与之对应的 source map 文件,然后将其用于还原出原始的源代码,从而方便调试工作。

为什么会出现该错误?

这个错误通常是由于在构建过程中,多次执行了生成 source map 的操作,从而导致同一个文件被重复地分配了多个 sourcemappingurl 嵌入链接。

例如,有些打包工具默认会自动生成 source map,在后续的配置中又手动添加了一份相同的 source map,就容易出现上述错误。

如何解决该错误?

要解决这个问题,我们需要先找到多余的 sourcemappingurl 链接所在的文件,在其中删除多余的链接即可。

比如,你可以手动检查或使用命令行工具来搜索代码中是否存在多余的 sourcemappingurl。以 webpack 为例,可以使用以下配置来禁止自动生成 source map

同时,手动添加的 source map 文件也需要对应地移除相关设置。

总结

当出现 file.js already has a source map associated with it 的错误提示时,我们需要检查当前文件是否已经被分配了一个 sourcemappingurl,并且排查是否存在多个 sourcemappingurl 嵌入链接的情况。解决该问题的方法是找到重复的链接所在文件,并将其中多余的链接删除。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/11992

纠错
反馈