在前端开发中，我们通常会使用 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